CSS-luokkien joukkosidonta Angularissa

ngClass-direktiivillä voidaan kytkeä päälle ja pois useita CSS-luokkia tägissä kerralla. Direktiivi saa arvokseen objektin, jonka avaimet ovat luokkia ja arvot ovat totuusarvoja. Luokka otetaan käyttöön, jos sille on asetettu arvo true, ja poistetaan käytöstä, jos false.

Katsotaan käytännössä. Oletetaan, että meillä on seuraavat luokat:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Katsotaan esimerkein, miten näitä luokkia otetaan käyttöön ja poistetaan käytöstä lohkolla.

Esimerkki

Otetaan yksi luokka käyttöön ja poistetaan toinen käytöstä:

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

Esimerkki

Oletetaan, että luokkien tilat tallennetaan luokan ominaisuuksiin:

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

Sidotaan luokan näkyvyys riippuen meidän ominaisuuksiemme arvoista:

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

Esimerkki

Ominaisuus voi sisältää kokonaisen objektin, jossa on luokat ja tilat:

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

Sidotaan tämä objekti lohkoomme:

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

Esimerkki

Objektin arvot voidaan hakea muista luokan ominaisuuksista:

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

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

Sidotaan tämä objekti lohkoomme:

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

Käytännön tehtävät

Luo kaksi CSS-luokkaa. Toinen määrittäköön lohkon taustan ja toinen fontin koon.

Tee kaksi painiketta. Ensimmäisen painikkeen klikkaus kytköttäköön ensimmäisen luokan, ja toisen painikkeen klikkaus kytköttäköön toisen luokan.