Les directives sont des classes qui ajoutent un comportement ou modifient les éléments du DOM. Angular a trois types : components (directives avec un template), directives structurelles (modifient la disposition du DOM), et directives d'attribut (modifient l'apparence/le comportement).
Elles ajoutent ou suppriment des éléments, et sont préfixées par :
*<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>
(Angular moderne offre aussi la syntaxe de contrôle de flux @if / @for plus récente qui remplace *ngIf/*ngFor.)
Elles modifient un élément existant sans l'ajouter/supprimer:
<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 = "";
}
}
Une directive personnalisée obtient une référence à son élément hôte et peut réagir aux événements — ici, surligner au survol. Utilisée comme <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
Le * est un raccourci qui enveloppe l'élément dans un <ng-template> — c'est pourquoi les directives structurelles peuvent ajouter/supprimer l'élément entièrement.
Les directives sont la façon dont Angular manipule le DOM de manière déclarative.
Les directives structurelles (*ngIf/*ngFor/@if/@for) et d'attribut (ngClass/ngStyle/ngModel) intégrées couvrent la plupart des besoins, et les directives personnalisées vous permettent d'encapsuler un comportement DOM réutilisable (surligner, tooltip, click-outside).
Comprendre les trois catégories — et que les components sont eux-mêmes des directives avec des templates — est fondamental pour le modèle de template Angular.