Aprende a dominar cómo una directiva en Angular puede escuchar eventos del usuario y modificar el DOM al mismo tiempo. Con HostBinding y HostListener, podrás resaltar elementos según su interacción, controlando la opacidad con incrementos por clic y manteniendo un contador de clics de forma clara y mantenible.

¿Qué es host binding y por qué es clave en Angular?

Usa HostBinding para editar atributos o estilos del elemento host directamente desde la directiva. Se importa desde Angular Core y permite vincular una propiedad de tu clase con un atributo del HTML, como un estilo.

• Vincula la propiedad del componente al DOM del host.
• Controla estilos como opacity sin tocar el HTML directamente.
• Ideal para resaltar elementos según interacción del usuario.

¿Cómo se declara el binding al estilo opacity?

Se define una propiedad numérica y se vincula al estilo del host. El rango de la propiedad CSS opacity va de 0 a 1: 0 es transparente y 1 es totalmente opaco. Aquí se inicia en 0.1 para que el elemento empiece casi transparente.

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

@Directive({ selector: '[contarClicks]' })
export class ContarClicksDirective {
  @HostBinding('style.opacity') opacity: number = 0.1;
  // ...
}

• Propiedad vinculada: style.opacity.
• Tipo de dato: número.
• Valor inicial: 0.1.

¿Cómo combinar host listener y host binding para responder a clics?

Con HostListener puedes escuchar eventos como el clic y, a la vez, actualizar el estilo mediante la propiedad vinculada. Cada clic incrementa la opacidad en 0.1, además de actualizar el contador de clics existente.

¿Cómo se incrementa la opacidad en cada clic?

Se captura el evento click y se suma 0.1 a la propiedad vinculada. Así, los primeros clics llevan la opacidad de 0.1 a 0.2, 0.3, 0.4 y así sucesivamente.

fullscreen
@HostListener('click')
onClick(): void {
  this.opacity += 0.1; // Incrementa la opacidad en cada clic.
  // También se incrementa el contador de clics existente.
}

• Evento observado: click.
• Cambio visual progresivo: de casi transparente a opaco.
• Sin modificar el HTML del componente.

¿Qué problema hubo con el ancla y cómo se solucionó?

Aunque el conteo de clics funcionaba, la opacidad se veía siempre en 1. La causa: al elemento de ancla no se le aplicó correctamente ese estilo. La solución fue mover la directiva del <a> al <li> para que la opacidad sí cambiara visualmente.

¿Qué ajustes se hicieron en la directiva y el template?

Se actualizó el uso de la directiva para aplicarla al elemento li en lugar del ancla. Luego, tras refrescar, todos iniciaron con opacidad 0.1 y aumentaron con cada clic hasta ser totalmente opacos.

• Aplicar la directiva al li en vez del ancla.
• Verificar el cambio en el componente principal al usar la directiva.
• Confirmar que la opacidad responde al clic y llega hasta 1.

Como cierre, se anticipa el siguiente módulo de estilos para mejorar la interfaz visual de forma notable. ¿Qué dudas o retos te surgieron al combinar HostBinding y HostListener? Comparte tu caso en los comentarios.