A direktívák olyan osztályok, amelyek viselkedést adnak hozzá vagy módosítanak a DOM elemeit. Az Angular három típussal rendelkezik: komponensek (sablonnal rendelkező direktívák), strukturális direktívák (módosítják a DOM elrendezést) és attribútum direktívák (módosítják a megjelenést/viselkedést).
Elemeket adnak hozzá vagy távolítanak el, és előtaggal vannak ellátva:
*<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>
(A modern Angular az újabb @if / @for vezérlőfolyam-szintaxist is kínálja, amely helyettesíti a *ngIf/*ngFor kódot.)
Ugy módosítanak egy meglévő elemet, hogy nem adnak hozzá/távolítanak el:
<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 = "";
}
}
Az egyéni direktíva hivatkozást kap az üzemeltetett elemére, és reagálhat az eseményekre — itt az egér fölött lévő kiemelésre. Használat: <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
A * egy rövidítés, amely az elemet egy <ng-template> részbe csomagolja — ezért a strukturális direktívák teljesen hozzáadhatnak/eltávolíthatnak egy elemet.
A direktívák a módszere az Angular DOM deklaratív kezelésére.
A beépített strukturális (*ngIf/*ngFor/@if/@for) és attribútum (ngClass/ngStyle/ngModel) direktívák az esetek többségében szükségesek, és az egyéni direktívák lehetővé teszik az újrafelhasználható DOM viselkedés (kiemelés, tooltip, click-outside) beágyazását.
A három kategória megértése — és az, hogy a komponensek maguk is direktívák sablonokkal — az Angular sablon modell alapja.