Data-binding af CSS-klasser i Angular

I Angular kan du aktivere og deaktivere anvendelsen af en CSS-klasse for en blok. Dette gøres ved hjælp af et tag-attribut, skrevet i følgende format:

[class.klassenavn]="true eller false"

Lad os se på det i praksis. Antag, at vi har følgende klasser:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Lad os se på eksempler på, hvordan man aktiverer og deaktiverer disse klasser for en blok.

Eksempel

Lad os aktivere én klasse og deaktivere en anden:

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

Eksempel

Antag, at klassernes tilstande er gemt i egenskaber for klassen:

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

Lad os binde klassens synlighed afhængigt af vores egenskabers værdier:

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

Praktiske opgaver

Følgende CSS-klasse er givet:

.hidden {
	visibility: hidden;
}

Bind denne klasse til en blok. Lav en knap, ved klik på hvilken blokken vil blive skjult eller vist.