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

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