Везивање CSS класа у Angular-у

У Angular-у можете укључивати и искључивати примену CSS класе за блок. То се ради помоћу атрибута тага, написаног у следећем формату:

[class.ime_klase]="true или false"

Хајде да погледамо у пракси. Нека имамо следеће класе:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Хајде да погледамо на примерима како укључити и искључити ове класе за блок.

Пример

Укључимо једну класу и искључимо другу:

<div [class.blue]="true" [class.bold]="false">
	текст
</div>

Нека стања класа буду сачувана у својствима класе:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Вежимо видљивост класе у зависности од вредности наших својстава:

<div [class.blue]="isBlue" [class.bold]="isBold">
	текст
</div>

Дата је следећа CSS класа:

.hidden {
	visibility: hidden;
}

Вежите ову класу за блок. Направите дугме, притиском на које ће блок бити скривен или приказан.