Asignación masiva de clases CSS en Angular

Con la directiva ngClass es posible activar y desactivar un conjunto de clases CSS en una etiqueta. La directiva toma como valor un objeto, cuyas claves serán las clases, y sus valores - valores booleanos. La clase se activará si se establece su valor en true, y se desactivará si es false.

Veámoslo 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 [ngClass]="{blue: true, 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 en función de los valores de nuestras propiedades:

<div [ngClass]="{blue: isBlue, bold: isBold}">
	text
</div>

Ejemplo

La propiedad puede contener un objeto completo con clases y estados:

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

Vinculemos este objeto a nuestro bloque:

<div [ngClass]="styles">
	text
</div>

Ejemplo

Se pueden obtener los valores para nuestro objeto de otras propiedades de la clase:

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

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

Vinculemos este objeto a nuestro bloque:

<div [ngClass]="styles">
	text
</div>

Tareas prácticas

Cree dos clases CSS. Que una de ellas defina el fondo del bloque, y la segunda - el tamaño de la fuente.

Cree dos botones. Que al hacer clic en el primer botón se alterne la primera clase, y al hacer clic en el segundo - se alterne la segunda clase.