Привязка 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; }

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