డైరెక్టివ్లు DOM లో ప్రవర్తన జోడించే లేదా మూలకాలను సవరించే తరగతులు. Angular మూడు రకాలను కలిగి ఉంది: భాగాలు (టెంప్లేట్తో డైరెక్టివ్లు), నిర్మాణ డైరెక్టివ్లు (DOM లేఅవుట్ను మార్చుతాయి) మరియు లక్షణ డైరెక్టివ్లు (రూపాన్ని/ప్రవర్తన మారుస్తాయి).
వారు మూలకాలను జోడించుకుంటారు లేదా తీసివేస్తారు, మరియు ఉపసర్గ ఉంటుంది:
*<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 = "";
}
}
ఒక కస్టమ్ డైరెక్టివ్ దాని హోస్ట్ మూలకానికి సూచన పొందుతుంది మరియు ఈవెంట్లకు ప్రతిస్పందించగలదు — ఇక్కడ, హోవర్ తీసుకోవడంపై హైలైట్ చేయడం. <p appHighlight>Text</p> గా ఉపయోగించబడుతుంది.
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* అనేది మూలకాన్ని <ng-template> లో చేర్చిన సంక్షిప్తతర రూపం — అందుకే నిర్మాణ డైరెక్టివ్లు మూలకాన్ని పూర్తిగా జోడించగలవు/తీసివేయగలవు.
డైరెక్టివ్లు Angular DOM ను ప్రకటనాత్మకంగా మార్పులు చేసే విధానం.
బిల్ట్-ఇన్ నిర్మాణ (*ngIf/*ngFor/@if/@for) మరియు లక్షణ (ngClass/ngStyle/ngModel) డైరెక్టివ్లు చాలా అవసరాలను కవర్ చేస్తాయి, మరియు కస్టమ్ డైరెక్టివ్లు మీరు పునర్వినియోగపూర్వక DOM ప్రవర్తనను గుండ్రం చేయటానికి అనుమతిస్తాయి (హైలైట్, టూల్టిప్, క్లిక్-బయటకు).
మూడు వర్గాలను అర్థం చేసుకోవడం — మరియు భాగాలు తాము టెంప్లేట్ల డైరెక్టివ్లు — Angular టెంప్లేట్ మోడల్కు కోర్ సంబంధితమైనవి.