@HostBinding ਅਤੇ @HostListener ਕੀ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

ਇਹ decorators ਇੱਕ directive ਜਾਂ component ਨੂੰ ਆਪਣੇ **host element** — ਜਿਸ element ਉੱਤੇ directive ਬੈਠਾ ਹੈ (ਜਾਂ component ਦਾ ਆਪਣਾ root element) — ਨੂੰ ਹੱਥ ਕਰਨ ਅਤੇ ਜਵਾਬ ਦੇਣ ਦੇ ਯੋਗ ਬਣਾਉਂਦੇ ਹਨ। `@HostBinding` host ਉੱਤੇ properties/attributes ਸੈੱਟ ਕਰਦਾ ਹੈ; `@HostListener` ਇਸ ਉੱਤੇ events ਸੁਣਦਾ ਹੈ। ## @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` reactively host element ਉੱਤੇ ਇੱਕ class/style/attribute/property ਨੂੰ ਇੱਕ component field ਵਿੱਚ bind ਕਰਦਾ ਹੈ — field ਨੂੰ ਬਦਲੋ ਅਤੇ host ਅਪ ਡੇਟ ਹੁੰਦਾ ਹੈ। ## @HostListener — host events ਦਾ ਜਵਾਬ ਦੇਣਾ ```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 ਪ੍ਰਾਪਤ ਕਰ ਸਕਦਾ ਹੈ)। ਇਕੱਠੇ ਤਿਨ੍ਹਾਂ ਇੱਕ directive ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ self-contained ਬਣਾਉਂਦੇ ਹਨ: ਇਹ ਆਪਣੇ host ਉੱਤੇ events ਸੁਣਦਾ ਹੈ ਅਤੇ reactively host ਦੀ ਦਿੱਖ ਨੂੰ ਅਪ ਡੇਟ ਕਰਦਾ ਹੈ। ## ਇੱਕ ਮੁਕੰਮਲ ਉਦਾਹਰਣ: hover highlight ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## host metadata ਬਿਕਲਪ ```ts @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 ਜੋੜ ਰਹੇ ਹਨ ਅਤੇ events ਦਾ declaratively ਜਵਾਬ ਦੇ ਰਹੇ ਹਨ, ਮੈਨੁਅਲ ਤੌਰ ਤੇ `ElementRef.nativeElement` ਨੂੰ ਚਿੱਪਕਾ ਕੇ ਅਤੇ listeners ਨੂੰ wire ਕੀਤੇ ਬਿਨਾਂ। ਇਹ reusable behavior directives (highlight, tooltip, draggable, accessible widgets) ਨੂੰ cleanly ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹਨ, ਅਤੇ ਇਹ automatically change detection ਅਤੇ listener cleanup ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ ਜੋ manual DOM code ਨੂੰ manage ਕਰਨਾ ਪੈਂਦਾ ਹੈ।