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

Прывязаце гэты клас да блока. Зрабіце кнопку, па націску на якую блок будзе схавацца або паказвацца.