Direktiv är klasser som lägger till beteende eller modifierar element i DOM:en. Angular har tre typer: komponenter (direktiv med en mall), strukturella direktiv (ändrar DOM-layouten) och attributdirektiv (ändrar utseende/beteende).
De lägger till eller tar bort element, och förses med prefixet :
*<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 erbjuder också den nyare @if / @for kontrollflödessyntaxen som ersätter *ngIf/*ngFor.)
De modifierar ett befintligt element utan att lägga till/ta bort det:
<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 = "";
}
}
Ett anpassat direktiv får en referens till sitt värdelement och kan reagera på händelser — här framhävning vid svävning. Används som <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* är en genväg som omsluter elementet i en <ng-template> — därför kan strukturella direktiv lägga till/ta bort elementet helt.
Direktiv är hur Angular manipulerar DOM:en deklarativt.
De inbyggda strukturella (*ngIf/*ngFor/@if/@for) och attributdirektiven (ngClass/ngStyle/ngModel) täcker de flesta behov, och anpassade direktiv låter dig inkapsla återanvändbart DOM-beteende (framhävning, tooltip, klick-utanför).
Att förstå de tre kategorierna — och att komponenter själva är direktiv med mallar — är kärnan i Angulars mallmodell.