এই ডেকোরেটরগুলি একটি নির্দেশাবলী বা উপাদানকে তার হোস্ট উপাদান — যে উপাদানটিতে নির্দেশাবলী বসে থাকে (বা উপাদানটির নিজস্ব রুট উপাদান) — কে পরিচালনা এবং প্রতিক্রিয়া জানাতে দেয়। @HostBinding হোস্টে সম্পত্তি/বৈশিষ্ট্য সেট করে; @HostListener এটিতে ইভেন্টগুলি শোনে।
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding প্রতিক্রিয়াশীলভাবে হোস্ট উপাদানে একটি শ্রেণী/শৈলী/বৈশিষ্ট্য/সম্পত্তি একটি উপাদান ক্ষেত্রের সাথে আবদ্ধ করে — ক্ষেত্রটি পরিবর্তন করুন এবং হোস্ট আপডেট হয়।
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 হোস্টে একটি DOM ইভেন্টের সাবস্ক্রাইব করে (এবং $event এবং অন্যান্য args পেতে পারে)। একসাথে তারা একটি নির্দেশাবলীকে সম্পূর্ণ স্ব-সংযুক্ত হতে দেয়: এটি তার হোস্টের ইভেন্টগুলি শোনে এবং প্রতিক্রিয়াশীলভাবে হোস্টের উপস্থিতি আপডেট করে।
<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 নির্দেশাবলীর জন্য তাদের হোস্ট উপাদানের সাথে যোগাযোগ করার মান সরঞ্জাম — শ্রেণী/শৈলী/বৈশিষ্ট্য যোগ করা এবং ইভেন্টগুলিতে ঘোষণামূলকভাবে প্রতিক্রিয়া জানানো, ম্যানুয়ালি ElementRef.nativeElement ধরে এবং শ্রবণকারী তারকা না করে।
তারা পুনঃব্যবহারযোগ্য আচরণ নির্দেশাবলী (হাইলাইট, টুলটিপ, টানযোগ্য, অ্যাক্সেসযোগ্য উইজেট) পরিষ্কারভাবে তৈরি করার জন্য অপরিহার্য এবং তারা স্বয়ংক্রিয়ভাবে পরিবর্তন সনাক্তকরণ এবং শ্রবণকারী পরিষ্কার পরিচালনা করে যা ম্যানুয়াল DOM কোডকে পরিচালনা করতে হবে।