Directives হল এমন ক্লাস যা DOM-এ আচরণ যোগ করে বা উপাদান পরিবর্তন করে। Angular-এ তিন ধরনের directive রয়েছে: components (template সহ directives), structural directives (DOM layout পরিবর্তন করে), এবং 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 এর host element-এর একটি রেফারেন্স পায় এবং ইভেন্টে সাড়া দিতে পারে — এখানে, hover-এ highlighting করে। <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-কে declaratively পরিচালনা করে।
বিল্ট-ইন structural (*ngIf/*ngFor/@if/@for) এবং attribute (ngClass/ngStyle/ngModel) directives বেশিরভাগ চাহিদা পূরণ করে এবং কাস্টম directives আপনাকে পুনঃব্যবহারযোগ্য DOM আচরণ encapsulate করতে দেয় (highlight, tooltip, click-outside)।
তিনটি ক্যাটেগরি বোঝা — এবং যে components নিজেরাই templates সহ directives — Angular template মডেলের মূল।