Directive हे असे क्लास आहेत जी DOM मधील elements ला वर्तन जोडतात किंवा संशोधित करतात. Angular मध्ये तीन प्रकार आहेत: components (template सह directive), structural directives (DOM layout बदलतात), आणि attribute directives (दृश्य/वर्तन बदलतात).
ते elements जोडतात किंवा काढतात आणि पूर्वलग्न आहे:
*<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 नियंत्रण-प्रवाह वाक्यरचना देखील प्रदान करते जो *ngIf/*ngFor ची जागा घेतो.)
ते 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 = "";
}
}
कस्टम directive ला त्याच्या host element ला संदर्भ मिळतो आणि ती events ला प्रतिक्रिया देऊ शकते — येथे, hover वर हायलाइट करणे. <p appHighlight>Text</p> म्हणून वापरले जाते.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* हा एक shorthand आहे जो element ला <ng-template> मध्ये लपवतो — म्हणूनच structural directives पूर्णपणे element जोडू किंवा काढू शकतात.
Directive हा Angular कसे declaratively DOM ला हाताळतो हे आहे.
अंतर्निर्मित structural (*ngIf/*ngFor/@if/@for) आणि attribute (ngClass/ngStyle/ngModel) directives बहुतेक गरजा पूरण करतात, आणि कस्टम directives तुम्हाला पुन्हा वापरता येणारे DOM वर्तन encapsulate करू देतात (हायलाइट, tooltip, click-outside).
तीन categories समजणे — आणि components स्वतः templates सह directives आहेत हे समजणे — Angular template model च्या मूलमध्ये आहे.