(モダン Angular では、*ngIf/*ngFor の代わりになる新しい @if / @for 制御フロー構文も提供しています。)
要素を追加または削除せずに既存の要素を変更します:
<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 = "";
}
}
カスタムディレクティブはホスト要素への参照を取得でき、イベントに反応できます — ここではホバー時のハイライトです。<p appHighlight>Text</p> のように使用されます。
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* は要素を <ng-template> でラップするための省略記法です — だからこそ構造ディレクティブは要素を完全に追加/削除できるのです。
ディレクティブは、Angular が DOM を宣言的に操作する方法です。
組み込みの構造ディレクティブ (*ngIf/*ngFor/@if/@for) と属性ディレクティブ (ngClass/ngStyle/ngModel) はほとんどのニーズをカバーしており、カスタムディレクティブを使用すると再利用可能な DOM 動作 (ハイライト、ツールチップ、click-outside) をカプセル化できます。
3 つのカテゴリーを理解する — そしてコンポーネント自体がテンプレートを持つディレクティブであることを理解する — ことは Angular テンプレートモデルの核となります。