Id-direktivi huma klassijiet li jżidu l-imġiba jew jimmodifikaw elementi fid-DOM. Angular għandu tliet tipi: komponenti (direktivi b'template), direktivi strutturali (ibiddlu l-layout tad-DOM), u direktivi ta' attribut (ibiddlu l-apparenza/imġiba).
Jiżżdu jew jneħħu elementi, u jipprefissji b':
*<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 modern joffri wkoll is-sintassi tal-kontroll ta' flussu aktar ġdida @if / @for li tissostitwixxi *ngIf/*ngFor.)
Jimmodifikaw element eżistenti mingħajr ma jżiduh/jneħħuh:
<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 = "";
}
}
Direktiva personalizzata tikseb referenza għall-element host tagħha u tista' twieġeb għal avvenimenti — hawn, l-evidenzjar meta l-mouse ħoloq. Tintuża bħala <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
L-* hija immuxtija li tgħebbel l-element fi <ng-template> — minn hawn id-direktivi strutturali jistgħu jżidu/jneħħu l-element kompletament.
Id-direktivi huma l-mod kif Angular jimmanipula d-DOM b'mod deklarattiv.
Id-direktivi strutturali (*ngIf/*ngFor/@if/@for) u ta' attribut (ngClass/ngStyle/ngModel) mibniyin jgħtu l-aktar bżonnijiet, u d-direktivi personalizzati jippermettulek li tgħebbel l-imġiba tad-DOM li tista' tintuża mill-ġdid (evidenzjar, tooltip, click-outside).
L-għarfien tal-tliet kategoriji — u li l-komponenti huma nfushom direktivi b'templates — huwa essenzjali għall-mudell ta' template ta' Angular.