@HostListener

@HostListener es un decorador en Angular que permite a las directivas y componentes escuchar eventos del DOM en el elemento al que están asociados.

📌 Importancia de @HostListener

• Escuchar Eventos del DOM: Facilita la captura de eventos como clics, teclas presionadas, movimientos del mouse, etc.

• Responde a Eventos Específicos: Permite ejecutar lógica específica en respuesta a eventos del usuario.

🌟 Ejemplo de Uso en una Directiva

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

@Directive({
  selector: '[appCheckBrokenImage]'
})
export class CheckBrokenImageDirective {
  @Input() defaultImage: string;

  constructor(private el: ElementRef) {}

  @HostListener('error')
  onError() {
    const element = this.el.nativeElement;
    if (this.defaultImage) {
      element.src = this.defaultImage;
    } else {
      element.src = 'assets/default-image.png'; // Ruta a una imagen por defecto
    }
  }
}

📑 Sintaxis de @HostListener

@HostListener(eventName: string, [args: string[]])

• eventName: El nombre del evento del DOM que deseas escuchar.

• args (opcional): Una lista de argumentos que deseas pasar al método manejador de eventos.

🌟 Ejemplo Detallado de @HostListener

@Directive({
  selector: '[appClickTracker]'
})
export class ClickTrackerDirective {

  @HostListener('click', ['$event'])
  handleClick(event: Event) {
    console.log('Element clicked:', event);
  }
}

⌨️ Escuchar Eventos de Teclas

@Directive({
  selector: '[appKeyTracker]'
})
export class KeyTrackerDirective {

  @HostListener('document:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent) {
    console.log('Key pressed:', event.key);
  }
}