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

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

← →
↑