ये decorators एक directive या component को अपने host element को हेराफेरी करने और उसके लिए जवाब देने देते हैं — वह element जिस पर directive बैठा है (या component का अपना root element)। @HostBinding host पर properties/attributes सेट करता है; @HostListener इस पर events को सुनता है।
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding प्रतिक्रियाशील रूप से host element पर एक class/style/attribute/property को component field से bind करता है — field को बदलें और host update हो जाता है।
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 को सुनता है और प्रतिक्रियाशील रूप से host के appearance को update करता है।
<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 के साथ interact करने के लिए standard tools हैं — classes/styles/attributes जोड़ना और declaratively events पर प्रतिक्रिया देना, बिना manually ElementRef.nativeElement को grab किए और listeners को wire किए।
वे reusable behavior directives (highlight, tooltip, draggable, accessible widgets) को cleanly बनाने के लिए essential हैं, और वे automatically change detection और listener cleanup को handle करते हैं जो manual DOM code को manage करना पड़ता है।