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 control-flow ਸਿੰਟੈਕਸ ਵੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ *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 ਨੂੰ ਆਪਣੇ ਹੋਸਟ ਤੱਤ ਦਾ ਹਵਾਲਾ ਮਿਲਦਾ ਹੈ ਅਤੇ ਘਟਨਾਵਾਂ ਦੇ ਜਵਾਬ ਵਿਚ ਕੰਮ ਕਰ ਸਕਦਾ ਹੈ — ਇੱਥੇ, ਹੋਵਰ ਤੇ ਹਾਈਲਾਈਟ ਕਰਨਾ। <p appHighlight>Text</p> ਦੇ ਤੌਰ ਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
<p *ngIf="x">...</p>
<!-- desugars to: -->
<ng-template [ngIf]="x"><p>...</p></ng-template>
* ਇੱਕ ਸ਼ਾਰਟਹੈਂਡ ਹੈ ਜੋ ਤੱਤ ਨੂੰ <ng-template> ਵਿਚ ਲਪੇਟਦਾ ਹੈ — ਇਸੇ ਕਰਕੇ structural directives ਤੱਤ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜੋੜ ਸਕਦੀਆਂ ਜਾਂ ਹਟਾ ਸਕਦੀਆਂ ਹਨ।
Directives ਹਨ ਕਿਵੇਂ Angular DOM ਨੂੰ ਘੋਸ਼ਣਾਤਮਕ ਤੌਰ ਤੇ ਸੰਚਾਲਿਤ ਕਰਦਾ ਹੈ।
ਬਿਲਟ-ਇਨ structural (*ngIf/*ngFor/@if/@for) ਅਤੇ attribute (ngClass/ngStyle/ngModel) directives ਬਹੁਤਸਾਰੀਆਂ ਜਰੂਰਤਾਂ ਪੂਰੀਆਂ ਕਰਦੀਆਂ ਹਨ, ਅਤੇ ਕਸਟਮ directives ਤੁਹਾਨੂੰ ਦੁਬਾਰਾ ਵਰਤੋ ਸਕਣਾ ਵਾਲੇ DOM ਰਵੈਯੇ (highlight, tooltip, click-outside) ਨੂੰ ਐਨਕੈਪਸੂਲ ਕਰਨ ਦਿੰਦੀਆਂ ਹਨ।
ਤਿੰਨ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਸਮਝਣਾ — ਅਤੇ ਇਹ ਕਿ components ਆਪਣੇ ਆਪ ਵਿਚ directives ਹਨ templates ਨਾਲ — Angular template ਮਾਡਲ ਦਾ ਮੂਲ ਹੈ।
ਵਿਸਤ੍ਰਿਤ ਜਵਾਬਾਂ ਨਾਲ IT ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ