Legarea în masă a claselor CSS în Angular

Cu ajutorul directivei ngClass se poate activa și dezactiva pentru un tag un set întreg de clase CSS. Directiva ia ca valoare un obiect, ale cărui chei vor fi clasele, iar valorile - valori booleene. Clasa va fi activată dacă pentru ea este setată valoarea true și dezactivată dacă false.

Să vedem în practică. Să presupunem că avem următoarele clase:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Să vedem cu exemple cum să activăm și să dezactivăm aceste clase pentru un bloc.

Exemplul

Să activăm o clasă și să dezactivăm alta:

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

Exemplul

Să presupunem că stările claselor sunt stocate în proprietăți ale clasei:

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

Să legăm vizibilitatea clasei în funcție de valorile proprietăților noastre:

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

Exemplul

Într-o proprietate poate fi un obiect întreg cu clase și stări:

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

Să legăm acest obiect de blocul nostru:

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

Exemplul

Se pot obține valori pentru obiectul nostru din alte proprietăți ale clasei:

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

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

Să legăm acest obiect de blocul nostru:

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

Sarcini practice

Creați două clase CSS. Să presupunem că una dintre ele definește fundalul blocului, iar a doua - dimensiunea fontului.

Realizați două butoane. Să presupunem că apăsarea pe primul buton comută prima clasă, iar apăsarea pe al doilea - comută a doua clasă.