Directives ऐसी क्लासेस हैं जो DOM में तत्वों को व्यवहार जोड़ते हैं या उन्हें संशोधित करते हैं। Angular के तीन प्रकार हैं: components (template के साथ directives), structural directives (DOM लेआउट बदलते हैं), और 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 नियंत्रण-प्रवाह सिंटेक्स भी प्रदान करता है जो *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 = "";
}
}
एक कस्टम directive अपने host तत्व का संदर्भ प्राप्त करता है और घटनाओं पर प्रतिक्रिया कर सकता है — यहां, होवर पर हाइलाइट करना। <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 को घोषणात्मक रूप से हेरफेर करने का तरीका है।
बिल्ट-इन structural (*ngIf/*ngFor/@if/@for) और attribute (ngClass/ngStyle/ngModel) directives अधिकांश आवश्यकताओं को कवर करते हैं, और कस्टम directives आपको पुन: प्रयोग योग्य DOM व्यवहार (highlight, tooltip, click-outside) को कैप्सूल करने देते हैं।
तीन श्रेणियों को समझना — और यह कि components स्वयं templates के साथ directives हैं — Angular template मॉडल के लिए मूल है।