Nello script precedente abbiamo visto come utilizzare il decorator HostListener, per creare un comportamento riutilizzabile da abbinare alla gestione degli eventi di un tag HTML con Angular.

Il decorator HostBinding consente di specificare una proprietà dell'elemento host dall'interno della classe. Questo ci consente, quindi, di riflettere il cambio di una proprietà, come ad esempio lo stile, manipolando direttamente una proprietà della classe, e senza dover modificare direttamente il DOM.

import { HostBinding } from '@angular/core'

@Directive({
  selector: "[myDirective]"
})
class MyDirective {
  @HostBinding('style.background') background: string;
  
  @HostListener('mouseover') onMouseOver() {
    this.background = 'red';
  }
}

Grazie a questo codice, ogni volta che ci sarà l'evento di mouseover, la proprietà background della classe riceverà un nuovo colore e, grazie all'uso della direttiva HostBinding, la stessa verrà applicato allo stile, cambiando il background dell'emento a cui è associata.

E per utilizzarlo, come al solito, dovremo utilizzare questa forma (dove il nome dell'attributo è quello specificato nella proprietà selector del decorator Directive):

<div myDirective>...</div>