# Динамическое изменение стилей в Angular

С помощью директив `ngClass` и `ngStyle` можно привязать выражения к элементам, благодаря чему наши стили будут изменяться динамически.

Давайте сделаем так, чтобы текст срывался или показывался с помощью свойства `active` класса компонента:

`export class AppComponent { active: boolean = true; toggle() { this.active = !this.active; } }`

Для этого напишем функцию `toggle`, которая попеременно будет включать или выключать данное свойство:

`export class AppComponent { active: boolean = true; toggle() { this.active = !this.active; } }`

В CSS файле компонента задаем следующий стиль классу:

`.hidden { display: none; }`

В темплейте компонента сделаем див, и добавим ему CSS класс `hidden`, который будет включаться или выключаться в зависимости от свойства `active` из класса компонента:

`<div [ngClass]="{hidden: active}"> text </div>`

Сделаем также кнопку, по нажатию на которую будет вызываться метод `toggle`, показывая или скрывая наш компонент:

`<button (click)="toggle()"> toggle </button>`

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

← →
↑