CSS klašu piesaiste Angular

Angular var ieslēgt un izslēgt CSS klases piemērošanu elementam. Tas tiek darīts, izmantojot elementa atribūtu, kas uzrakstīts šādā formātā:

[class.klases_nosaukums]="true vai false"

Paskatīsimies praksē. Pieņemsim, ka mums ir šādas klases:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Apskatīsim ar piemēriem, kā ieslēgt un izslēgt šīs klases elementam.

Piemērs

Ieslēgsim vienu klasi un izslēgsim otru:

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

Pieņemsim, ka klašu stāvokļi tiek glabāti klases īpašībās:

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

Piesienam klases redzamību atkarībā no mūsu īpašību vērtībām:

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

Dota šāda CSS klase:

.hidden {
	visibility: hidden;
}

Piesieniet šo klasi elementam. Izveidojiet pogu, uz kuras noklikšķinot elements tiks paslēpts vai parādīts.