Le direttive sono classi che aggiungono comportamento o modificano elementi nel DOM. Angular ha tre tipi: componenti (direttive con un template), direttive strutturali (modificano il layout del DOM) e direttive di attributo (modificano l'aspetto/il comportamento).
Aggiungono o rimuovono elementi, e sono prefissate con :
*<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 moderno offre anche la più recente sintassi di controllo di flusso @if / @for che sostituisce *ngIf/*ngFor.)
Modificano un elemento esistente senza aggiungerlo o rimuoverlo:
<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 = "";
}
}
Una direttiva personalizzata ottiene un riferimento al suo elemento host e può reagire agli eventi — qui, l'evidenziazione al passaggio del mouse. Usata come <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
Il * è una scorciatoia che avvolge l'elemento in un <ng-template> — ecco perché le direttive strutturali possono aggiungere/rimuovere l'elemento completamente.
Le direttive sono come Angular manipola il DOM in modo dichiarativo.
Le direttive strutturali (*ngIf/*ngFor/@if/@for) e di attributo (ngClass/ngStyle/ngModel) integrate coprono la maggior parte delle esigenze, e le direttive personalizzate ti permettono di incapsulare il comportamento del DOM riutilizzabile (evidenziazione, tooltip, click-outside).
Comprendere le tre categorie — e che i componenti sono essi stessi direttive con template — è fondamentale per il modello di template Angular.