Angular-da CSS klaslarynyň köpçülikleýin baglanyşdyrylmagy

ngClass direktiwasy bilen teg-de birwagtda birnäçe CSS klaslaryny işjeňleşdirip we ýapyp bolýar. Direktiwa baha hökmünde açar hökmünde klaslar bolan, bahasy bolsa boolean bahalar bolan bir obýekdi kabul edýär. Klas işjeňleşdiriler, eger onuň üçin baha true bolsa, we ýapylar, eger false bolsa.

Amaly işde göreli. Bizde aşakdaky klaslar bar bolsun:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Bu klaslary blok üçin nädip işjeňleşdirmeli we ýapmalydygyny mysallar boýunça göreli.

Mysal

Bir klasy işjeňleşdirip, beýlekisini ýapalyň:

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

Mysal

Klaslaryň ýagdaýlary klasyň aýratynlyklarynda saklanyň:

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

Klasyň görünmegini biziň aýratynlyklarymyzyň bahalaryna baglalyň:

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

Mysal

Aýratynlykda klaslar we ýagdaýlar bilen doly bir obýekt bolup biler:

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

Bu obýekti biziň blokymyza baglalyň:

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

Mysal

Obýektimiz üçin bahalary klasyň beýleki aýratynlyklaryndan alyp bolýar:

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

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

Bu obýekti biziň blokymyza baglalyň:

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

Amaly wezîpeler

Iki CSS klasy dörediň. Olardan biri blok üçin fon kesgitleýär, ikinjisi bolsa şriftiň ölçegini kesgitlesin.

Iki düwme ýasadyň. Birinji düwmä basmak birinji klasy tigirlesin, we ikinji düwmä basmak - ikinji klasy tigirlesin.