Množično povezovanje CSS razredov v Angular

Z direktivo ngClass lahko vklopimo in izklopimo v oznaki cel niz CSS razredov. Direktiva kot vrednost sprejme objekt, katerega ključi so razredi, vrednosti pa logične vrednosti. Razred bo vklopljen, če je zanj nastavljena vrednost true, in izklopljen, če je false.

Poglejmo si to v praksi. Naj imamo naslednje razrede:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Poglejmo si s primeri, kako vklopiti in izklopiti te razrede za blok.

Primer

Vklopimo en razred in izklopimo drugega:

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

Primer

Naj stanja razredov hranijo v lastnostih razreda:

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

Povežimo vidnost razreda odvisno od vrednosti naših lastnosti:

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

Primer

V lastnosti je lahko cel objekt s razredi in stanji:

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

Povežimo ta objekt z našim blokom:

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

Primer

Vrednosti za naš objekt lahko dobimo iz drugih lastnosti razreda:

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

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

Povežimo ta objekt z našim blokom:

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

Praktične naloge

Ustvarite dva CSS razreda. Naj eden od njiju določa ozadje bloka, drugi pa velikost pisave.

Naredite dva gumba. Naj klik na prvi gumb preklopi prvi razred, klik na drugega pa preklopi drugi razred.