Directives हरू क्लासहरू हुन् जसले DOM मा elements को व्यवहार जोड गर्छ वा परिवर्तन गर्छ। Angular सँग तीन किसिमका directives छन्: components (template सहितको directives), structural directives (DOM layout परिवर्तन गर्छ), र attribute directives (दिखावट/व्यवहार परिवर्तन गर्छ)।
तिनीहरू elements जोड वा हटाउँछन्, र को साथ prefix गरिन्छ:
*<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 को जागा लिन्छ।)
तिनीहरू existing element को परिवर्तन गर्छ element जोड्न वा हटाउन बिना:
<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 को reference पाउँछ र events को प्रतिक्रिया दिन सक्छ — यहाँ, hover मा highlight गर्छ। <p appHighlight>Text</p> को रूपमा प्रयोग गरिन्छ।
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* shorthand हो जसले element लाई <ng-template> मा wrap गर्छ — यस कारणले structural directives ले element पूर्ण रूपमा जोड/हटाउन सक्छ।
Directives Angular ले DOM लाई declarative तरिकाले कसरी manipulate गर्छ भन्ने कुरा हो।
Built-in structural (*ngIf/*ngFor/@if/@for) र attribute (ngClass/ngStyle/ngModel) directives हरू धेरै जसो आवश्यकताहरू पूरा गर्छन्, र custom directives ले तपाईलाई reusable DOM behavior (highlight, tooltip, click-outside) encapsulate गर्न दिन्छ।
तीन categories को बुझ्न — र components आफै templates सहितको directives हुन् — Angular template model को आधार हो।