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...