Utilizzare il decorator HostBinding di Angular in una direttiva per gestire gli eventi di un oggetto HTML

di , in HTML5, Angular,

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>

Commenti

Visualizza/aggiungi commenti

Utilizzare il decorator HostBinding di Angular in una direttiva per gestire gli eventi di un oggetto HTML (#243)
| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi