Masovno povezivanje CSS klasa u Angularu

Pomoću ngClass direktive možemo uključiti i isključiti ceo set CSS klasa na tagu. Direktiva kao vrednost prima objekat čiji su ključevi klase, a vrednosti - Bulove vrednosti. Klasa će biti uključena ako je za nju postavljena vrednost true, i isključena ako je false.

Hajde da pogledamo u praksi. Recimo da 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

Hajde da uključimo jednu klasu i isključimo drugu:

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

Primer

Recimo da stanja klasa budu č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 [ngClass]="{blue: isBlue, bold: isBold}">
	text
</div>

Primer

U svojstvu može biti ceo objekat sa klasama i stanjima:

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

Povežimo ovaj objekat sa našim blokom:

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

Primer

Možemo vrednosti za naš objekat dobiti iz drugih svojstava klase:

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

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

Povežimo ovaj objekat sa našim blokom:

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

Praktični zadaci

Napravite dve CSS klase. Neka jedna od njih definiše pozadinu bloka, a druga - veličinu fonta.

Napravite dva dugmeta. Neka klik na prvo dugme menja stanje (toggle) prve klase, a klik na drugo - menja stanje druge klase.