Врзување на 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;
}

Врзете ја оваа класа на блокот. Направете копче, при кликнување на кое блокот ќе се сокрива или прикажува.