Directives
We walked through the Angular component and the way it is decorated. The @Component
itself is a directive with a template configured in the metadata. So, a directive is a component without a template, and @directive
is used in Typescript to attach metadata to it.
Structural directives
Structural directives deal with modifying elements in the DOM by adding new elements, removing existing elements, and replacing existing elements with new elements. The following markup shows two structural directives: *ngFor
and *ngIf
:
<div *ngFor="#todo of todos"></div> <todo-item *ngIf="selectedTodo"></todo-item>
*ngFor
iterates through each item in the todos collection and adds a div
tag for each item. And *ngIf
renders <todo-item>
only if selectedTodo is available.
Attribute directives
An attribute directive will be added like an attribute to existing HTML elements, and this can alter or extend the behavior of HTML elements. For example, an ngModel directive, if added...