Directives
class that attaches to an existing DOM elements and modifies appearance , behavior, or adjacent elements structure.
uses decorator— @ Directive
Directives:
- components
- *structural directives
designed to change DOM layout by adding or removing DOM elements.
The asterisk (*) prefix *ngIf —in example above its same as if hero is true than display the name same is with for loop:
switch:
and etc…
- [attribute directives]
designed to modify appearance or behavior of an element
@ Component — directives add behavior to an existing DOM element or an existing component instance, on the other hand @component creates its own hierarchy of DOM elements with attached behavior.
NgModel
DIRECTIVE
Creates a FormControl instance from a domain model and binds it to a form control element.
property binding []
Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.
event binding ()
Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
Two way binding [()]
Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components.
Two-way binding combines property binding with event binding:
- Property binding sets a specific element property.
- Event binding listens for an element change event.
Pipes
uses @Pipe decorator
class that allows changing data inside of a template.
what are pipes?
for example if we want to output date
javascript:
Angular
General syntax looks like this
chaining pipes
it will transform string ‘Angular’ like this -> ‘Angular’ -> ‘ular’ -> ‘ULAR’
This is how we would use it in a code:
there are two types of pipes pure and impure
pure pipes
default
angular executes pure pipes only when it detects a pure change o the input value. a pure change is either primitive input value or changed object reference
- primitive input value — String, Number, Boolean, Symbol
- changed object reference — function,object,date,array
impure pipe
Angular executes impure pipe during every component change detection cycle.
an impure pipe will be called a lot, as often as every keystroke or mouse-move
bonus :
https://angular.io/api/core/Directive
https://angular.io/guide/attribute-directives
https://angular.io/guide/structural-directives
https://angular.io/api/core/Pipe
