Vinculación de clases CSS en Angular

En Angular, puedes activar o desactivar la aplicación de una clase CSS para un bloque. Esto se hace usando un atributo de etiqueta, escrito en el siguiente formato:

[class.nombre_de_la_clase]="true o false"

Veamos en la práctica. Supongamos que tenemos las siguientes clases:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Veamos con ejemplos cómo activar y desactivar estas clases para un bloque.

Ejemplo

Activemos una clase y desactivemos otra:

<div [class.blue]="true" [class.bold]="false">
	text
</div>

Ejemplo

Supongamos que los estados de las clases se almacenan en propiedades de la clase:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Vinculemos la visibilidad de la clase dependiendo de los valores de nuestras propiedades:

<div [class.blue]="isBlue" [class.bold]="isBold">
	text
</div>

Tareas prácticas

Dada la siguiente clase CSS:

.hidden {
	visibility: hidden;
}

Vincule esta clase a un bloque. Cree un botón, al hacer clic en el cual el bloque se ocultará o se mostrará.