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 *ngIf/*ngFor ને બદલે નવી @if / @for નિયંત્રણ-પ્રવાહ સિન્ટેક્સ પણ આપે છે.)
તેઓ તે ઉમેર્યા વિના / દૂર કર્યા વિના હાલના તત્વને સંશોધિત કરે છે:
<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 તત્વનો સંદર્ભ મેળવે છે અને ઇવેન્ટ્સ પર પ્રતિક્રિયા કરી શકે છે — અહીં, hover પર હાઇલાઇટ કરવું. <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 હેરફેર કરવાનો માર્ગ છે.
બિલ્ટ-ઇન structural (*ngIf/*ngFor/@if/@for) અને attribute (ngClass/ngStyle/ngModel) directives મોટાભાગની જરૂરિયાતો આવરી લે છે, અને કસ્ટમ directives તમને પુનઃવપરાશ્યોગ ચાલુ DOM વર્તન (highlight, tooltip, click-outside) બંધ કરવા દે છે.
તેઓ ત્રણ કેટેગરીઓ સમજવું — અને કે components પોતાને template સાથેના directives છે — Angular template મોડેલ માટે મૂળ છે.