Масово свързване на CSS класове в Angular

С помощта на директивата ngClass може да се включват и изключват в таг веднага набор от CSS класове. Директивата приема като стойност обект, чиито ключове са класовете, а стойностите - булеви стойности. Класът ще бъде включен, ако за него е зададена стойност true, и изключен, ако false.

Да видим на практика. Нека имаме следните класове:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Да видим с примери как се включват и изключват тези класове за блок.

Пример

Включваме един клас и изключваме друг:

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

Пример

Нека състоянията на класовете се съхраняват в свойства на класа:

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

Свързваме видимостта на класа в зависимост от стойностите на нашите свойства:

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

Пример

В свойството може да има цял обект с класове и състояния:

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

Свързваме този обект с нашия блок:

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

Пример

Може стойностите за нашия обект да се получат от други свойства на класа:

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

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

Свързваме този обект с нашия блок:

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

Практически задачи

Създайте два CSS класа. Нека единият от тях определя фона на блока, а вторият - размера на шрифта.

Направете два бутона. Нека натискането на първия бутон включва/изключва първия клас, а натискането на втория - включва/изключва втория клас.