Structural directives (* સાથે વાળાયેલા, જેમ કે *ngIf/) DOM ને બદલે છે। એ syntactic sugar છે — પર્દાની પાછળ, Angular તત્વને માં લપેટે છે અને directive નિયંત્રણ કરે છે કે આ template ક્યારે/કેવી રીતે render થાય છે.
Structural directives (* સાથે વાળાયેલા, જેમ કે *ngIf/) DOM ને બદલે છે। એ syntactic sugar છે — પર્દાની પાછળ, Angular તત્વને માં લપેટે છે અને directive નિયંત્રણ કરે છે કે આ template ક્યારે/કેવી રીતે render થાય છે.
*ngFor*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
* Angular ને કહે છે: "આ element ને template માં લપેટો, અને directive ને તેને DOM માં ક્યારે stamp કરવું તે નક્કી કરવા દો." <ng-template> એ inert markup નો ભાગ છે જે directive તેને instantiate કરે ત્યાં સુધી render થતું નથી.
import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";
@Directive({ selector: "[appUnless]" }) // *appUnless = "the opposite of ngIf"
export class UnlessDirective {
constructor(
private templateRef: TemplateRef<any>, // the wrapped <ng-template>
private viewContainer: ViewContainerRef, // where to render it
) {}
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.viewContainer.createEmbeddedView(this.templateRef); // render it
} else {
this.viewContainer.clear(); // remove it
}
}
}
// usage: <p *appUnless="isHidden">Shown when isHidden is false</p>
દુષ્ટ બે injected parts છે: TemplateRef એ element નું template છે ("શું render કરવું"), અને ViewContainerRef DOM માં સ્થાન છે ("ક્યાં"). Directive createEmbeddedView કૉલ કરે છે element ઉમેરવા માટે અથવા clear તેને દૂર કરવા માટે.
<!-- newer Angular replaces *ngIf/*ngFor with built-in block syntax -->
@if (isVisible) { <p>Hello</p> } @else { <p>Hidden</p> }
@for (item of items; track item.id) { <li>{{ item.name }}</li> }
આ નવું syntax વધુ readable અને performant છે, જોકે underlying add/remove concept એ જ છે.
* → <ng-template> desugaring સમજવાથી *ngIf/*ngFor કેવી રીતે DOM ઉમેરે અને દૂર કરે છે તે સ્પષ્ટ થાય છે, અને તમને custom structural directives બનાવવાની મંજૂરી આપે છે (TemplateRef + ViewContainerRef વાપરીને) advanced template control માટે — જેમ કે permission-based rendering, custom repeaters, અથવા lazy stamping.
તે એ પણ સ્પષ્ટ કરે છે કે તમે એક જ element પર બે structural directives (*ngIf અને *ngFor) શા માટે મૂકી શકતા નથી: દરેકને તેનું પોતાનું template wrapper જોઈએ છે.