Directives sind Klassen, die Verhalten hinzufügen oder Elemente im DOM verändern. Angular hat drei Arten: Components (Directives mit Template), strukturelle Directives (verändern das DOM-Layout) und Attribut-Directives (verändern Aussehen/Verhalten).
Sie fügen Elemente hinzu oder entfernen sie und sind mit gekennzeichnet:
*<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>
(Modernes Angular bietet auch die neuere @if / @for Control-Flow-Syntax, die *ngIf/*ngFor ersetzt.)
Sie ändern ein vorhandenes Element, ohne es hinzuzufügen/zu entfernen:
<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 = "";
}
}
Eine benutzerdefinierte Directive erhält einen Verweis auf sein Host-Element und kann auf Ereignisse reagieren — hier Hervorhebung beim Überfahren mit der Maus. Wird als <p appHighlight>Text</p> verwendet.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
Der * ist eine Abkürzung, die das Element in ein <ng-template> einhüllt — deshalb können strukturelle Directives das Element ganz hinzufügen/entfernen.
Directives sind die Art und Weise, wie Angular das DOM deklarativ manipuliert.
Die eingebauten strukturellen (*ngIf/*ngFor/@if/@for) und Attribut-Directives (ngClass/ngStyle/ngModel) decken die meisten Anforderungen ab, und benutzerdefinierte Directives ermöglichen es dir, wiederverwendbares DOM-Verhalten (Hervorhebung, Tooltip, Click-Outside) zu encapsulieren.
Das Verständnis der drei Kategorien — und dass Components selbst Directives mit Templates sind — ist der Kern des Angular-Template-Modells.