@HostBinding மற்றும் @HostListener என்ன செய்கின்றன?

Question

Accepted Answer

இந்த டெகோரேட்டர்கள் ஒரு directive அல்லது component ஆனது அதன் **host element** — directive இருக்கும் element (அல்லது 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` என்பது host element இல் ஒரு class/style/attribute/property ஐ component field க்கு reactive-ஆக bind செய்கிறது — field ஐ மாற்றுங்கள் மற்றும் host update ஆகிறது. ## @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 ஐ கேட்கிறது மற்றும் host இன் appearance ஐ reactive-ஆக 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 ஐ interact செய்ய கொண்டிருக்கும் standard tools — classes/styles/attributes ஐ சேர்க்கவும் மற்றும் events க்கு declaratively பதிலளிக்கவும், manually `ElementRef.nativeElement` ஐ பிடித்துக்கொண்டு listeners ஐ wire செய்யாமல். இவை reusable behavior directives (highlight, tooltip, draggable, accessible widgets) cleanly கட்ட essential, மற்றும் அவை change detection மற்றும் listener cleanup ஐ automatically handle செய்கின்றன, இதை manual DOM code ஆனது manage செய்ய வேண்டும்.