Angular: 21. Directiva NgClass

La directiva NgClass nos permite asignar clases CSS a elementos de forma dinámica, de tal forma que podremos cambiar el estilo CSS de los elementos en cualquier momento durante la ejecución de la aplicación.

Nos creamos un componente llamado "clases", al que le creamos dos variables: un string llamado "alerta", al que le asignamos como valor "alert-danger" (una clase de Bootstrap que cambia el color a rojo). Creamos también un objeto con una propiedad booleana "danger", a la que asignamos true por defecto:

Luego modificamos el html del componente como sigue:

Como se puede ver, hemos incluido lo siguiente, de arriba a abajo:

1. Un div de tipo alert de Bootstrap, al que le incluimos la directiva NgClass y le damos el valor de la variable "alerta" del TypeScript del componente (que por defecto lo pusimos a rojo).

2. Dos botones que al hacer clic, cambian el valor de la variable "alerta" del TypeScript del componente (cambiando con ello el estilo del elemento alerta anterior).

3. Un texto "Hola Mundo" al que le incluimos la directiva NgClass, de forma que cambia la clase CSS (el color) a rojo si la variable "danger" del objeto propiedades es verdadera, y cambia el color a azul si es falsa.

4. Un botón que cambia el valor de la variable "danger" del objeto propiedades a verdadero o falso cada vez que se hace click en él. También le hemos incluido la directiva NgClass para cambiarle las clases CSS según el valor verdadero o falso de la variable "danger".

Por último, sólo queda modificar el "app.component.html" para incluir nuestro nuevo componente:

Ahora si levantamos la aplicación, se verá de la siguiente forma:

Pulsando en los diferentes botones, cambiamos el estilo CSS de los elementos de la pantalla como hemos descrito antes:

Y eso es todo.