Дынамічнае змяненне стыляў у 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>

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