HostBinding en Angular: controla estilos desde directivas

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.

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.

@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 al