Povezovanje CSS razredov v Angular

V Angularju lahko vklopite-izklopite uporabo CSS razreda za blok. To naredite z uporabo atributa oznake, zapisanega v naslednji obliki:

[class.ime_razreda]="true ali false"

Poglejmo si v praksi. Naj imamo naslednje razrede:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Poglejmo si s primeri, kako vklopiti in izklopiti te razrede za blok.

Primer

Vklopimo en razred in izklopimo drugega:

<div [class.blue]="true" [class.bold]="false">
	text
</div>

Naj stanja razredov shranimo v lastnosti razreda:

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

Povežimo vidnost razreda odvisno od vrednosti naših lastnosti:

<div [class.blue]="isBlue" [class.bold]="isBold">
	text
</div>

Podan je naslednji CSS razred:

.hidden {
	visibility: hidden;
}

Povežite ta razred z blokom. Naredite gumb, ob kliku na katerega se bo blok skril ali prikazal.