Массовая привязка 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 класса. Пусть один из них определяет фон блока, а второй - размер шрифта.

Сделайте две кнопки. Пусть нажатие на первую кнопку тогглит первый класс, а нажатие на вторую - тогглит второй класс.