Uso de @HostListener en Angular para Escuchar Eventos del DOM

El decorador @HostListener en Angular es el método utilizado para escuchar y manejar eventos del DOM. Este decorador suele emplearse en la creación de directivas personalizadas y la manipulación de eventos DOM en los componentes.

Dentro del marco de trabajo de Angular, los decoradores son una forma de adjuntar información adicional o funcionalidad a las clases, propiedades, métodos, parámetros y selectores. En el caso del decorador @HostListener, se usa para vincular los eventos del DOM a los métodos del componente o directiva.

Aplicaciones de @HostListener

Supongamos que quieres cambiar el color de fondo de un elemento cada vez que el usuario pasa el cursor sobre él. Podrías lograr esto usando @HostListener en la siguiente manera:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }

}

En este ejemplo, @HostListener está vinculando los eventos del DOM 'mouseenter' y 'mouseleave' a los métodos onMouseEnter() y onMouseLeave(), respectivamente. Cuando el usuario pasa el cursor sobre el elemento, se activará el método onMouseEnter(), cambiando el color del fondo a amarillo. De la misma manera, cuando el cursor salga del elemento, se invocará el método onMouseLeave(), eliminando el color de fondo.

Buenas Prácticas

Al emplear @HostListener, es importante tener en cuenta la limpieza de los oyentes de eventos para evitar fugas de memoria. Angular suele hacer esto de forma automática cuando se destruye el componente. Sin embargo, si creas manualmente los oyentes de eventos, deberías quitarlos al destruir el componente.

En conclusión, @HostListener es una herramienta muy útil en Angular para escuchar y manejar eventos del DOM de forma eficaz. Asegúrate de hacer buen uso de ella para mejorar la interactividad de tus aplicaciones Angular.