Directives, Pipes & Templates
Angular Directives Overview
A directive is a class that changes the appearance or behaviour of an element. Angular has three kinds: components (directives with a template), structural directives that add or remove DOM, and attribute directives that modify an existing element.
What is Directives Overview in Angular?
A directive is a class that changes the appearance or behaviour of an element. Angular has three kinds: components (directives with a template), structural directives that add or remove DOM, and attribute directives that modify an existing element.
Key points to remember
- Structural directives change the DOM tree; attribute directives change an existing element.
- From Angular 17 the built-in control flow — @if, @for, @switch — replaces the *ng equivalents.
- A custom directive is generated with ng g directive name.
The three directive types
| Type | Marked with | Examples |
|---|---|---|
| Component | @Component | every component you write |
| Structural | * prefix or @if / @for | *ngIf, *ngFor, *ngSwitch, @if, @for |
| Attribute | plain attribute | ngClass, ngStyle, ngModel, your own |
Angular Directives Overview— Interview Questions & FAQs
What is the difference between a structural and an attribute directive?+
A structural directive adds or removes elements from the DOM — the asterisk is a hint that a template is being created. An attribute directive changes the look or behaviour of an element that already exists.