Directives sune azuzuwan da suke ƙara halin abu ko gyara abubuwan a cikin DOM. Angular yana da nau'i uku: components (directives tare da template), structural directives (suna canza tsarin DOM), da attribute directives (suna canza bayyanar/hali).
Suna ƙara ko cire abubuwa, kuma suna nuni da :
*<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 na jiya yana ba da sabon jaki na @if / @for na sarrafa karar da ke maye gurbin *ngIf/*ngFor.)
Suna canza abu da akwai ba tare da ƙara/cire shi:
<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 = "";
}
}
Directive na gida yana samar da bayanin gida ta abu nasi kuma na iya haɓaka abubuwan - a nan, haske akan hover. Yana amfani azaman <p appHighlight>Text</p>.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* taƙaitacciyar magana ce da ke linzamin abu a cikin <ng-template> — agaya ke nan directives na tsari na iya ƙara/cire abuwan gaba daya.
Directives sune hanyar da Angular ke amfani da DOM a bata wayo.
Abubuwan da aka inyana *ngIf/*ngFor/@if/@for da attribute (ngClass/ngStyle/ngModel) sune abin bugi yawancin bukatu, kuma directives na gida suna ba ka damar na kulle da jiya sarrafa halin DOM (haske, tooltip, click-outside).
Understanding na nau'i uku — da cewa components kansa directives ne tare da templates — shine abin mahimmanci ga tsarin template Angular.