# Привязка CSS классов в Angular

В Angular можно включать-выключать применение CSS класса для блока. Это делается с помощью атрибута тега, написанного в следующем формате:

`[class.имя_класса]="true или false"`

Давайте посмотрим на практике. Пусть у нас есть следующие классы:

`.blue { color: blue; } .bold { font-weight: bold; }`

Давайте посмотрим на примерах, как включать и выключать эти классы для блока.

## Пример

Включим один класс и выключим другой:

`<div [class.blue]="true" [class.bold]="false"> text </div>`

## Пример

Пусть состояния классов хранятся в свойствах класса:

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

Привяжем видимость класса в зависимости от значений наших свойств:

`<div [class.blue]="isBlue" [class.bold]="isBold"> text </div>`

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

Дан следующий CSS класс:

`.hidden { visibility: hidden; }`

Привяжите этот класс к блоку. Сделайте кнопку, по нажатию на которую блок будет скрываться или показываться.

← →
↑