Direktifler, DOM'da davranış ekleyen veya öğeleri değiştiren sınıflardır. Angular'ın üç türü vardır: bileşenler (şablonlu direktifler), yapısal direktifler (DOM düzenini değiştirir) ve öznitelik direktifleri (görünüş/davranış değiştirir).
Öğe ekler veya kaldırırlar ve ön ekine sahiptirler:
*<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 ayrıca *ngIf/*ngFor yerine geçen daha yeni @if / @for kontrol akışı söz dizimi sunmaktadır.)
Bir öğeyi eklemeden/kaldırmadan değiştirirler:
<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 = "";
}
}
Özel bir direktif, ana öğesine bir referans alır ve olaylara tepki verebilir — burada, üzerine gelişte vurgulama. <p appHighlight>Metin</p> olarak kullanılır.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* öğeyi <ng-template> içinde sarmalayan bir kısaltmadır — bu nedenle yapısal direktifler öğeyi tamamen ekleyebilir/kaldırabilir.
Direktifler Angular'ın DOM'u bildirimsel olarak manipüle etme yöntemidir.
Hazır yapısal (*ngIf/*ngFor/@if/@for) ve öznitelik (ngClass/ngStyle/ngModel) direktifleri çoğu gereksinimi karşılar ve özel direktifler yeniden kullanılabilir DOM davranışını (vurgulama, araç ipucu, dış tıklama) kapsüllemesine izin verir.
Üç kategoriyi anlamak — ve bileşenlerin kendilerinin şablonlu direktifler olduğu — Angular şablon modelinin özüdür.