Legarea claselor CSS în Angular

În Angular poți activa-dezactiva aplicarea unei clase CSS pentru un bloc. Acest lucru se face cu ajutorul atributului tag-ului, scris în următorul format:

[class.numele_clasei]="true sau false"

Să vedem în practică. Să presupunem că avem următoarele clase:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Să analizăm cu exemple, cum să activăm și să dezactivăm aceste clase pentru un bloc.

Exemplul

Să activăm o clasă și să dezactivăm alta:

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

Exemplul

Să presupunem că stările claselor sunt stocate în proprietățile clasei:

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

Să legăm vizibilitatea clasei în funcție de valorile proprietăților noastre:

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

Sarcini practice

Este dată următoarea clasă CSS:

.hidden {
	visibility: hidden;
}

Legăți această clasă la bloc. Realizați un buton, la apăsarea căruia blocul va fi ascuns sau afișat.