یہ decorators ایک directive یا component کو اپنے host element سے منسلک کریں — یہ element جس پر directive بیٹھی ہے (یا component کا اپنا root element)۔ @HostBinding host پر properties/attributes سیٹ کرتی ہے؛ @HostListener اس پر events سننے کے لیے۔
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding reactively ایک class/style/attribute/property کو host element پر component field سے bind کرتی ہے — field کو تبدیل کریں اور host اپ ڈیٹ ہوتا ہے۔
import { Directive, HostListener, HostBinding } from "@angular/core";
@Directive({ selector: "[appHighlight]" })
export class HighlightDirective {
@HostBinding("style.background") bg = "";
@HostListener("mouseenter") onEnter() {
this.bg = "yellow"; // changing the field updates the host via HostBinding
}
@HostListener("mouseleave") onLeave() {
this.bg = "";
}
@HostListener("click", ["$event"]) onClick(event: MouseEvent) {
console.log("host clicked", event);
}
}
@HostListener host پر DOM event کو subscribe کرتی ہے (اور $event اور دیگر args وصول کر سکتی ہے)۔ اکٹھے یہ ایک directive کو مکمل طور پر self-contained بناتے ہیں: یہ اپنے host پر events سنتی ہے اور reactively host کی ظاہری شکل اپ ڈیٹ کرتی ہے۔
<p appHighlight>Hover me</p>
→ mouseenter fires onEnter() → sets bg='yellow' → @HostBinding updates the <p>'s background
→ mouseleave fires onLeave() → clears it
@Directive({
selector: "[appHighlight]",
host: { // equivalent, declared in metadata
"[class.active]": "isActive",
"(click)": "onClick($event)",
},
})
@HostBinding اور @HostListener directives کے لیے معیاری ٹولز ہیں اپنے host element سے منسلک ہونے کے لیے — classes/styles/attributes شامل کریں اور declaratively events کا جواب دیں، بغیر دستی طور پر ElementRef.nativeElement کو پکڑنے اور listeners کو جوڑنے کے۔
یہ reusable behavior directives (highlight, tooltip, draggable, accessible widgets) کو صاف ستھرا بنانے کے لیے ضروری ہیں، اور یہ خود بخود change detection اور listener cleanup کو handle کرتے ہیں جو دستی DOM code کو manage کرنا پڑتا۔