CSS osztályok kötése az Angularban

Az Angularban ki és be kapcsolhatjuk egy CSS osztály alkalmazását egy elemre. Ez a következő formátumban írt elemattribútum segítségével történik:

[class.osztály_neve]="true vagy false"

Nézzük a gyakorlatban. Tegyük fel, hogy a következő osztályaink vannak:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Nézzünk példákat arra, hogyan kapcsolhatjuk be és ki ezeket az osztályokat egy elemhez.

. példa

Kapcsoljunk be egy osztályt és kapcsoljunk ki egy másikat:

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

Tegyük fel, hogy az osztályok állapotai az osztály tulajdonságaiban tárolódnak:

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

Kössük az osztály láthatóságát a tulajdonságaink értékeitől függően:

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

Adott a következő CSS osztály:

.hidden {
	visibility: hidden;
}

Kösd ezt az osztályt egy elemhez. Készíts egy gombot, amelyre kattintva az elem elrejtőzik vagy megjelenik.