Host Listeners

Aprende a crear una directiva de atributo en Angular para contar clics en anchors y aprovechar datos de analytics sin complicaciones. Verás cómo usar HostListener para escuchar eventos, limitar el selector a hipervínculos y registrar información en console para debugging. Además, integra la directiva en app.module.ts y úsala en tu lista de lugares. Si luego quieres almacenar datos, lo ideal es persistirlos en un servidor con Node.

¿Qué problema resuelve esta directiva de Angular?

Esta solución te permite medir interacciones reales sobre enlaces y respaldar decisiones con datos. Es útil para presentar resultados a propietarios: visitas, clics diarios y comportamiento por elemento.

• Contar clics por elemento con una directiva ligera.
• Analytics accionables desde el front-end.
• Escucha de eventos con HostListener de forma declarativa.
• Alcance por anchor: cada enlace lleva su propio conteo.

¿Cómo se crea la directiva de atributo con HostListener?

Partimos de un archivo con la convención de Angular: nombre en pascal case para la clase, sufijo .directive.ts y un selector de atributo que aplica solo a enlaces.

// contar-clicks.directive.ts
import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: 'a[contarClicks]'
})
export class ContarClicksDirective {
  private clickN = 0;

  @HostListener('click', ['$event.target'])
  onClick(btn: HTMLElement) {
    console.log('En el anchor:', btn);
    console.log('Número de clicks:', this.clickN++);
  }
}

Claves de la implementación:

• @Directive con selector de atributo: 'a[contarClicks]'.
• Variable de estado: clickN inicia en 0 y se incrementa en cada clic.
• @HostListener('click'): escucha el evento y recibe el event target.
• Salida de debugging: imprime el anchor, el mensaje y el conteo.

¿Cómo registrarla en app.module.ts?

Asegúrate de declararla para usarla en plantillas.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ResaltarDirective } from './directives/resaltar.directive';
import { ContarClicksDirective } from './directives/contar-clicks.directive';

@NgModule({
  declarations: [
    AppComponent,
    ResaltarDirective,
    ContarClicksDirective
  ],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

¿Cómo usarla en la lista de lugares?

La directiva no recibe parámetros: no uses corchetes. Aplícala directamente sobre el anchor que envuelve el elemento.

<a contarClicks>
  <li>La Gardenia</li>
</a>

<a contarClicks>
  <li>Hotel La Gracia</li>
</a>

Tips prácticos para validar en la console del navegador:

• Abre la pestaña consola y filtra niveles: desactiva errores si distraen.
• Verás el mensaje con el número de clicks creciendo por elemento.
• Cambia entre enlaces: cada uno conserva su propio conteo.

¿Qué debes saber de eventos y alcance?

Con HostListener el alcance es por instancia: cada anchor obtiene su propio oyente y su propio estado. Por eso, si haces clic en “La Gardenia” y luego en “Hotel La Gracia”, cada uno muestra su propio contador independiente.

Puntos clave para eventos:

• Evento principal: click. Puedes usar otros como mouseover o blur.
• Parámetro del oyente: $event.target para acceder al elemento objetivo.
• Buenas prácticas: mantén el conteo en una propiedad privada y usa console para debugging.
• Persistencia recomendada: guarda los analytics en servidor con Node cuando sea necesario.

¿Quieres que amplíe el ejemplo con envío de datos al servidor o más eventos del DOM? Cuéntame tu caso y te propongo el siguiente paso.