Dekorator ini memungkinkan direktif atau komponen memanipulasi dan merespons elemen host — elemen tempat direktif berada (atau elemen root komponen itu sendiri). @HostBinding menetapkan properti/atribut pada host; @HostListener mendengarkan event di dalamnya.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding secara reaktif mengikat kelas/gaya/atribut/properti pada elemen host ke field komponen — ubah field dan host akan terupdate.
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 berlangganan event DOM pada host (dan dapat menerima $event dan argumen lainnya). Bersama-sama, mereka memungkinkan direktif menjadi sepenuhnya mandiri: ia mendengarkan event di host-nya dan secara reaktif memperbarui tampilan 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 dan @HostListener adalah alat standar untuk direktif berinteraksi dengan elemen host mereka — menambahkan kelas/gaya/atribut dan merespons event secara deklaratif, tanpa secara manual mengambil ElementRef.nativeElement dan memasang listener.
Mereka penting untuk membangun direktif perilaku yang dapat digunakan kembali (highlight, tooltip, draggable, widget yang dapat diakses) dengan bersih, dan mereka secara otomatis menangani deteksi perubahan dan pembersihan listener yang harus dikelola kode DOM manual.