A directive is a class with a @Directive decorator.
A component is a directive-with-a-template; a @Component decorator is actually a @Directive decorator extended with template-oriented features.
Two other kinds of directives exist:
1) Structural directives
2) Attribute directives.
They tend to appear within an element tag as attributes do, sometimes by name but more often as the target of an assignment or a binding.
Structural Directives
Structural directives alter layout by adding, removing, and replacing elements in DOM.
|
1 2 |
<li *ngFor="let hero of heroes"></li> <hero-detail *ngIf="selectedHero"></hero-detail> |
Attribute Directives
Attribute directives alter the appearance or behavior of an existing element. In templates they look like regular HTML attributes, hence the name.
The ngModel directive, which implements two-way data binding, is an example of an attribute directive. ngModel modifies the behavior of an existing element (typically an <input>) by setting its display value property and responding to change events.
|
1 |
<input [(ngModel)]="hero.name"> |