Directives وہ classes ہیں جو DOM میں عناصر میں رویہ شامل کرتی ہیں یا انہیں تبدیل کرتی ہیں۔ Angular میں تین اقسام ہیں: components (template کے ساتھ directives)، structural directives (DOM layout کو تبدیل کرتے ہیں)، اور attribute directives (ظہور/رویہ کو تبدیل کرتے ہیں)۔
یہ عناصر کو شامل یا ہٹاتے ہیں، اور سے پہلے آتے ہیں:
*<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 @if / @for control-flow syntax بھی فراہم کرتا ہے جو *ngIf/*ngFor کی جگہ لیتا ہے۔)
یہ موجودہ عنصر کو شامل/ہٹائے بغیر تبدیل کرتے ہیں:
<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 = "";
}
}
ایک custom directive اپنے host element کا حوالہ حاصل کرتا ہے اور events کے جواب میں عمل کر سکتا ہے — یہاں، hover پر highlighting۔ <p appHighlight>Text</p> کے طور پر استعمال ہوتا ہے۔
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* shorthand ہے جو عنصر کو <ng-template> میں لپیٹتا ہے — یہی وجہ ہے کہ structural directives عنصر کو مکمل طور پر شامل/ہٹا سکتے ہیں۔
Directives وہ طریقہ ہے جس سے Angular DOM کو declaratively نقل کرتا ہے۔
Built-in structural (*ngIf/*ngFor/@if/@for) اور attribute (ngClass/ngStyle/ngModel) directives زیادہ تر ضروریات کو پورا کرتی ہیں، اور custom directives آپ کو قابلِ دوبارہ استعمال DOM رویہ (highlight، tooltip، click-outside) کو encapsulate کرنے دیتے ہیں۔
تینوں اقسام کو سمجھنا — اور یہ کہ components خود templates کے ساتھ directives ہیں — Angular template model کے لیے بنیادی ہے۔