10. Directives
Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given bydirectives.
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.
While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from directives.
Two other kinds of directives exist: structural and 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 alter layout by adding, removing, and replacing elements in DOM.
- *ngFor tells Angular to stamp out one
<li>
per hero in the heroes list. - *ngIf includes the HeroDetail component only if a selected hero exists.
Other Directives
- ngSwitch
- ngStyle
- ngClass
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.