En Angular, las directivas de atributo desempeñan un papel fundamental al cambiar dinámicamente el comportamiento y la apariencia de los elementos sin modificar la estructura del DOM. Dos de las directivas de atributo más utilizadas son ngClass y ngStyle. Estas directivas ofrecen formas flexibles de controlar los estilos de los elementos y las clases CSS según el estado del componente.

¿Qué es ngClass?

Esto es especialmente útil cuando se desea cambiar la apariencia de un elemento en respuesta a cambios en los datos; por ejemplo, resaltar un elemento activo o aplicar estilos según el estado.

ngClass admite sintaxis de objeto, arreglos de cadenas y funciones que devuelven estos formatos para aplicar clases de manera dinámica.

Sintaxis de objeto

Utilizar un objeto donde las claves son nombres de clases y los valores son condiciones booleanas. Si la condición es true, se aplica la clase.

En este ejemplo, las clases se agregan o eliminan según el valor de la propiedad isActive en el componente.

Si isActive es true, se agrega la clase active y se elimina inactive. Si isActive es false, ocurre lo contrario.

Array de cadenas

Utiliza un array donde cada cadena representa un nombre de clase CSS que se agregará al elemento. Este enfoque es útil cuando se desean aplicar varias clases de forma dinámica sin condiciones.

Aquí, las clases listadas en el arreglo se aplican al elemento.

Utilizar un arreglo es útil cuando se desea asignar dinámicamente múltiples clases, especialmente cuando la cantidad de clases puede variar.

Función

Utilizar una función que retorne cualquiera de los formatos soportados: un objeto, un arreglo de cadenas, o una cadena única. Esto es útil cuando las clases aplicadas dependen de lógica más compleja o condiciones dinámicas.

ngClass también puede aceptar una función que devuelve un objeto, un arreglo o una cadena, dependiendo de la lógica que definas.

En este caso, el método getClass() retorna un objeto con los nombres de las clases CSS como claves y condiciones booleanas como valores.

• Si isError es true, se aplicará la clase error-class;
• Si isSuccess es true, se aplicará la clase success-class;
• Si ambos son false, no se añadirá ninguna clase.

¿Qué es ngStyle?

Con ngStyle, es posible modificar propiedades como el color de fondo, la fuente, el tamaño, la posición y más, todo directamente desde el componente.

¿Cómo funciona ngStyle?

ngStyle acepta un objeto donde las claves son nombres de propiedades CSS y los valores son expresiones que se evalúan durante el renderizado.

Si una expresión devuelve un valor, ese valor se aplica a la propiedad CSS correspondiente del elemento.

Ejemplo con un objeto de estilos

En este ejemplo, se cambian dinámicamente el color del texto y el tamaño de fuente del elemento:

Si textColor es red y fontSize es 20px, esos estilos se aplicarán al elemento. Este enfoque permite combinar fácilmente varios estilos en una sola expresión para una mayor flexibilidad.

Ejemplo utilizando una variable y una expresión

Si es necesario aplicar estilos basados en lógica, se pueden utilizar expresiones directamente en la plantilla:

Si isActive es true, el color de fondo será verde; si es false, será rojo. En este caso, se utiliza un operador ternario para que la lógica sea concisa y expresiva.

Ejemplo con un valor dinámico

Las expresiones en ngStyle también pueden basarse en métodos. Puede utilizar métodos del componente para calcular valores de estilo de forma dinámica:

En este ejemplo, el método getDynamicStyle() devuelve un objeto de estilos basado en el valor actual de isDarkMode.

Esto es especialmente útil cuando los estilos dependen de condiciones externas como las preferencias del usuario, la hora del día o los temas de la aplicación.

¿Cuándo deberías usar ngClass vs ngStyle?

• Utiliza ngClass al trabajar con clases CSS predefinidas. Esto es ideal cuando los estilos se reutilizan en varios lugares y deseas un control centralizado de estilos a través de tu hoja de estilos;

• Utiliza ngStyle cuando necesites aplicar estilos de manera dinámica y directa — por ejemplo, al establecer colores, dimensiones u otras propiedades visuales que no están asociadas a clases reutilizables.

Al usar tanto ngClass como ngStyle, puedes controlar fácil y eficientemente la apariencia y el comportamiento de tus elementos según los datos del componente — todo sin tener que actualizar manualmente el DOM.