CSS klases masveida piesaistīšana Angular

Izmantojot direktīvu ngClass, ir iespējams vienlaikus ieslēgt un izslēgt CSS klases kopu elementā. Direktīva kā vērtību pieņem objektu, kura atslēgas ir klases, bet vērtības ir Būla vērtības. Klase tiks ieslēgta, ja tai ir iestatīta vērtība true, un izslēgta, ja false.

Paskatīsimies praksē. Pieņemsim, ka mums ir šādas klases:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Apskatīsim ar piemēriem, kā ieslēgt un izslēgt šīs klases blokam.

Piemērs

Ieslēgsim vienu klasi un izslēgsim otru:

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

Piemērs

Pieņemsim, ka klases stāvokļi tiek glabāti klases īpašībās:

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

Piesaistīsim klases redzamību atkarībā no mūsu īpašību vērtībām:

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

Piemērs

Īpašībā var būt vesels objekts ar klasēm un to stāvokļiem:

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

Piesaistīsim šo objektu mūsu blokam:

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

Piemērs

Objekta vērtības var iegūt no citām klases īpašībām:

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

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

Piesaistīsim šo objektu mūsu blokam:

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

Praktiskie uzdevumi

Izveidojiet divas CSS klases. Lai viena no tām definē bloka fona krāsu, bet otrā - fonta izmēru.

Izveidojiet divas pogas. Lai pirmās pogas nospiešana pārslēdz pirmo klasi, bet otrās pogas nospiešana - pārslēdz otro klasi.