Massebinding af CSS-klasser i Angular

Med direktivet ngClass kan man tænde og slukke for et sæt af CSS-klasser i et tag på én gang. Direktivet tager imod en objekt, hvis nøgler er klasser, og hvis værdier er boolske værdier. Klassen vil blive tilknyttet, hvis den er sat til værdien true, og frakoblet, hvis den er 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 tænder og slukker for disse klasser for en blok.

Eksempel

Lad os aktivere én klasse og deaktivere en anden:

<div [ngClass]="{blue: true, bold: false}">
	tekst
</div>

Eksempel

Antag, at klassernes tilstande er gemt i klassens egenskaber:

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

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

<div [ngClass]="{blue: isBlue, bold: isBold}">
	tekst
</div>

Eksempel

En egenskab kan være et helt objekt med klasser og tilstande:

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

Lad os binde dette objekt til vores blok:

<div [ngClass]="styles">
	tekst
</div>

Eksempel

Man kan hente værdierne til vores objekt fra andre egenskaber i klassen:

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

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

Lad os binde dette objekt til vores blok:

<div [ngClass]="styles">
	tekst
</div>

Praktiske opgaver

Opret to CSS-klasser. Lad den ene af dem definere blokkens baggrund, og den anden - skriftstørrelsen.

Lav to knapper. Lad et klik på den første knap toggle den første klasse, og et klik på den anden - toggle den anden klasse.