Динамическое изменение стилей в 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>

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