En Angular, las directivas de atributo desempeñan un papel clave 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, resaltando un elemento activo o aplicando 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

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

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 de texto

Utiliza un array donde cada cadena de texto representa un nombre de clase CSS que se añadirá 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 una lógica más compleja o de 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 tipografía, 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 modifican 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 mayor flexibilidad.

Ejemplo usando una variable y una expresión

Si necesitas aplicar estilos basados en lógica, puedes utilizar expresiones directamente en la plantilla:

Si isActive es true, el color de fondo será verde; si es false, será rojo. Aquí 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. Puedes 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 se debe usar ngClass vs ngStyle?

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

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

Al emplear tanto ngClass como ngStyle, se puede controlar fácil y eficientemente la apariencia y el comportamiento de los elementos según los datos del componente, sin necesidad de actualizar manualmente el DOM.