@HostBinding మరియు @HostListener ఏమి చేస్తాయి?

Question

Accepted Answer

ఈ decorators ఒక directive లేదా component దాని **host element** — directive ఉన్న element (లేదా component యొక్క స్వంత root element) ను manipulate చేయటానికి మరియు respond చేయటానికి అనుమతిస్తాయి. `@HostBinding` host పై properties/attributes ఆ set చేస్తుంది; `@HostListener` దానిపై events ను listen చేస్తుంది. ## @HostBinding — host properties/attributes కు bind చేయండి ```ts import { Directive, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("class.active") isActive = false; // toggle a CSS class on the host @HostBinding("style.color") color = "black"; // bind an inline style @HostBinding("attr.role") role = "button"; // set an attribute } ``` `@HostBinding` host element పై ఒక class/style/attribute/property ను component field కు reactively bind చేస్తుంది — field ను change చేయండి మరియు host update అవుతుంది. ## @HostListener — host events కు respond చేయండి ```ts 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 ను receive చేయవచ్చు). కలిసి, ఒక directive completely self-contained ఉండటానికి అనుమతిస్తాయి: ఇది host పై events ను listen చేస్తుంది మరియు host యొక్క appearance ను reactively update చేస్తుంది. ## ఒక సంపూర్ణ ఉదాహరణ: hover highlight ```text

Hover me

→ mouseenter fires onEnter() → sets bg='yellow' → @HostBinding updates the

's background → mouseleave fires onLeave() → clears it ``` ## host metadata alternative ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## ఇది ఎందుకు ముఖ్యమైనది `@HostBinding` మరియు `@HostListener` **directives** దానికి host element ఇంటరాక్ట్ చేయడానికి standard tools — classes/styles/attributes ను add చేయటానికి మరియు events కు declaratively respond చేయటానికి, manually `ElementRef.nativeElement` ను grab చేసి listeners ను wire చేయకుండా. ఈవి reusable behavior directives (highlight, tooltip, draggable, accessible widgets) cleanly build చేయటానికి essential, మరియు అవి change detection మరియు listener cleanup ను automatically handle చేస్తాయి, దీనిని manual DOM code manage చేయవలసి వస్తుంది.