HostBinding en Angular: controla estilos desde directivas

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:24

HostBinding en Angular: controla estilos desde directivas

Curso de Angular 4

Clase 21 de 80

Clase 21 / 80

Recursos

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 <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.