CSS-klasside hulgiline seostamine Angularis

Direktiivi ngClass abil saab sisse ja välja lülitada korraga terve kogumi CSS-klasse. Direktiiv võtab väärtuseks objekti, mille võtmed on klassid ja väärtused on Loogilised väärtused. Klass lülitatakse sisse, kui selle jaoks on seatud väärtus true, ja välja, kui false.

Vaatame seda praktikas. Oletame, et meil on järgmised klassid:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Vaatame näidete varal, kuidas need klassid ploki jaoks sisse ja välja lülitada.

Näide

Lülitame ühe klassi sisse ja teise välja:

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

Näide

Oletame, et klasside olekud on salvestatud klassi omadustesse:

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

Seome klassi nähtavuse sõltuvalt meie omaduste väärtustest:

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

Näide

Omadus võib sisaldada tervet objekti koos klasside ja olekutega:

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

Seome selle objekti oma plokiga:

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

Näide

Me saame oma objekti väärtused hankida teistest klassi omadustest:

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

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

Seome selle objekti oma plokiga:

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

Praktilised ülesanded

Looge kaks CSS-klassi. Olgu üks neist määratleb ploki tausta, ja teine - fondi suuruse.

Tehke kaks nuppu. Olgu esimese nupu vajutus lülitab esimest klassi sisse/välja, ja teise nupu vajutus - lülitab teist klassi sisse/välja.