ساختی ہدایات (جو * کے ساتھ ہوتی ہیں، جیسے *ngIf/) DOM کو تبدیل کرتی ہیں۔ نحوی شکر ہے — پردے کے پیچھے، Angular عنصر کو میں لپیٹتا ہے اور ہدایت کنٹرول کرتی ہے کہ یہ ٹیمپلیٹ کب/کیسے DOM میں رینڈر ہو۔
ساختی ہدایات (جو * کے ساتھ ہوتی ہیں، جیسے *ngIf/) DOM کو تبدیل کرتی ہیں۔ نحوی شکر ہے — پردے کے پیچھے، Angular عنصر کو میں لپیٹتا ہے اور ہدایت کنٹرول کرتی ہے کہ یہ ٹیمپلیٹ کب/کیسے DOM میں رینڈر ہو۔
*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 کو بتاتا ہے: "اس عنصر کو ایک ٹیمپلیٹ میں لپیٹو، اور ہدایت کو یہ فیصلہ کرنے دو کہ اسے DOM میں کب شامل کریں۔" <ng-template> مارک اپ کا ایک غیر فعال حصہ ہے جو اس وقت تک رینڈر نہیں ہوتا جب تک کوئی ہدایت اسے فوری نہ کرے۔
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>
دو انجیکٹ کیے گئے حصے کلیدی ہیں: TemplateRef عنصر کا ٹیمپلیٹ ہے ("کیا رینڈر کریں")، اور ViewContainerRef DOM میں مقام ہے ("کہاں")۔ ہدایت createEmbeddedView کو کال کرتی ہے عنصر کو شامل کرنے کے لیے یا 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> }
yہ نیا نحو زیادہ قابلِ فہم اور کمکار ہے، اگرچہ بنیادی اضافہ/ہٹانے کا تصور ایک جیسا ہے۔
* → <ng-template> کو سادہ بنانا سمجھنا *ngIf/*ngFor کیسے DOM عناصر کو شامل اور ہٹاتے ہیں یہ واضح کرتا ہے، اور آپ کو اپنی ساختی ہدایات بنانے دیتا ہے (استعمال کریں TemplateRef + ViewContainerRef) اعلیٰ ٹیمپلیٹ کنٹرول کے لیے — مثلاً اختیار کی بنیاد پر رینڈرنگ، اپنے ریپیٹر، یا سست مہرلگانا۔
یہ یہ بھی واضح کرتا ہے کہ آپ ایک عنصر پر دو ساختی ہدایات (*ngIf اور *ngFor) کیوں نہیں رکھ سکتے: ہر ایک کو اپنے ٹیمپلیٹ راپر کی ضرورت ہے۔