In Angular, la gestione degli eventi è piuttosto banale in quanto possiamo associare all'evento un metodo del component. Tuttavia, questa tecnica è poco efficiente nei casi in cui vogliamo creare comportamenti custom su più controlli. Supponiamo ad esempio, di voler mostrare un tooltip ogni volta che una textbox prende il focus. Se dovessimo associare un metodo per ogni textbox per ogni component finiremmo per scrivere una quantità di codice eccessiva, ridondante e poco manutenibile. In questi casi possiamo creare una direttiva che gestisca l'evento focus dell'oggetto HTML e che esegua il codice che vogliamo. Successivamente, applichiamo questa direttiva ai componenti così da usarla dove serve.
Per attaccarsi all'evento di un oggetto, dobbiamo utilizzare il decorator HostListener al quale passiamo in input il nome dell'evento e un array di parametri che vengono poi passati al metodo che gestisce l'evento. In questo caso, la parola chiave $event specifica che viene passato in input l'oggetto event nativo di JavaScript.

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {
  @HostListener('focus', ['$event'])
  public onFocus(event: any): void {
    //showtooltip
  }
}

Per utilizzare la direttiva, basta aggiungerla come attributo all'oggetto HTML. Il nome dell'attributo è quello specificato nella proprietà selector del decorator Directive.

<input type="text" myDirective />