Povezivanje CSS klasa u Angularu

U Angular-u možete uključivati i isključivati primenu CSS klase za blok. To se radi pomoću atributa taga, napisanog u sledećem formatu:

[class.ime_klase]="true ili false"

Pogledajmo u praksi. Neka imamo sledeće klase:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Pogledajmo na primerima kako uključiti i isključiti ove klase za blok.

Primer

Uključimo jednu klasu i isključimo drugu:

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

Neka stanja klasa budu sačuvana u svojstvima klase:

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

Povežimo vidljivost klase u zavisnosti od vrednosti naših svojstava:

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

Dat je sledeći CSS klasa:

.hidden {
	visibility: hidden;
}

Povežite ovu klasu sa blokom. Napravite dugme, čijim pritiskom će se blok skriti ili prikazati.