यी decorators ले एक directive वा component लाई यसको host 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 सदस्यता लिन्छ (र $event र अन्य args प्राप्त गर्न सक्छ)। सँगै तिनले एक directive लाई पूर्ण स्व-निहित बनाउन दिन्छ: यो यसको 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 थप गर्दै र events मा reactively प्रतिक्रिया गर्दै, manually ElementRef.nativeElement ग्राब गर्दै र wiring listeners बिना।
तिनी reusable behavior directives (highlight, tooltip, draggable, accessible widgets) cleanly निर्माण गर्न आवश्यक छन्, र तिनी स्वचालित रूप से change detection र listener cleanup हेरफेर गर्छन् जो manual DOM code ले व्यवस्थापन गर्नु पर्छ।