স্ট্রাকচারাল ডিরেক্টিভ (যেগুলি * সহ থাকে, যেমন *ngIf/) DOM পরিবর্তন করে । হল সিনট্যাকটিক সুগার — অভ্যন্তরীণভাবে, Angular উপাদানটিকে একটি এ মোড়ায় এবং ডিরেক্টিভ নিয়ন্ত্রণ করে যে সেই টেমপ্লেটটি কখন/কীভাবে রেন্ডার করা হবে।
স্ট্রাকচারাল ডিরেক্টিভ (যেগুলি * সহ থাকে, যেমন *ngIf/) DOM পরিবর্তন করে । হল সিনট্যাকটিক সুগার — অভ্যন্তরীণভাবে, Angular উপাদানটিকে একটি এ মোড়ায় এবং ডিরেক্টিভ নিয়ন্ত্রণ করে যে সেই টেমপ্লেটটি কখন/কীভাবে রেন্ডার করা হবে।
*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> }
এই নতুন সিনট্যাক্স আরও পাঠযোগ্য এবং কার্যকর, যদিও অন্তর্নিহিত যোগ/অপসারণ ধারণা একই।
* → <ng-template> ডিসুগারিং বোঝা স্পষ্ট করে কিভাবে *ngIf/*ngFor DOM যোগ এবং অপসারণ করে, এবং আপনাকে কাস্টম স্ট্রাকচারাল ডিরেক্টিভ তৈরি করতে দেয় (TemplateRef + ViewContainerRef ব্যবহার করে) উন্নত টেমপ্লেট নিয়ন্ত্রণের জন্য — যেমন অনুমতি-ভিত্তিক রেন্ডারিং, কাস্টম রিপিটার, বা অলস স্ট্যাম্পিং।
এটি আরও স্পষ্ট করে কেন আপনি একটি উপাদানে দুটি স্ট্রাকচারাল ডিরেক্টিভ (*ngIf এবং *ngFor) রাখতে পারবেন না: প্রতিটির নিজের টেমপ্লেট র্যাপার প্রয়োজন।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন