தिरेकটिவுகள் 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 கட்டுப்பாட்டு-பாய்வு தொடரியல் வழங்குகிறது.)
অവை சேர்க்காமல்/நீக்காமல் istem உறுப்பை மாற்றுகிறது:
<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 டெம்பிலேட் மாடலின் மূলமாகும்.