Directives zijn klassen die gedrag toevoegen of elementen in de DOM wijzigen. Angular heeft drie soorten: components (directives met een template), structural directives (wijzigen DOM-indeling), en attribute directives (wijzigen uiterlijk/gedrag).
Ze voegen elementen toe of verwijderen deze, en worden voorafgegaan met :
*<p *ngIf="isLoggedIn">Welcome back!</p> <!-- add/remove based on condition -->
<li *ngFor="let item of items; let i = index"> <!-- repeat an element per item -->
{{ i }}: {{ item.name }}
</li>
<div [ngSwitch]="status">
<p *ngSwitchCase="'active'">Active</p>
<p *ngSwitchDefault>Unknown</p>
</div>
(Modern Angular biedt ook de nieuwere @if / @for control-flow syntax die *ngIf/*ngFor vervangt.)
Ze wijzigen een bestaand element zonder het toe te voegen of te verwijderen:
<div [ngClass]="{ active: isActive, error: hasError }">...</div> <!-- toggle classes -->
<div [ngStyle]="{ color: textColor }">...</div> <!-- dynamic styles -->
<input [(ngModel)]="name" /> <!-- two-way binding -->
import { Directive, ElementRef, HostListener } from "@angular/core";
@Directive({ selector: "[appHighlight]" }) // used as <p appHighlight>
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener("mouseenter") onEnter() {
this.el.nativeElement.style.background = "yellow"; // change the host element
}
@HostListener("mouseleave") onLeave() {
this.el.nativeElement.style.background = "";
}
}
Een aangepaste directive krijgt een verwijzing naar het host-element en kan op gebeurtenissen reageren — hier markeert het tekst bij hover. Gebruikt als <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
De * is een afkorting die het element in een <ng-template> verpakt — daarom kunnen structural directives het element helemaal toevoegen of verwijderen.
Directives zijn hoe Angular de DOM declaratief manipuleert.
De ingebouwde structural (*ngIf/*ngFor/@if/@for) en attribute (ngClass/ngStyle/ngModel) directives dekken de meeste behoeften, en aangepaste directives laten u herbruikbaar DOM-gedrag (highlight, tooltip, click-outside) inkapselen.
Begrip van de drie categorieën — en dat components zelf directives met templates zijn — staat centraal in het Angular-templatemodel.