Angular'да CSS классдорун көптөгөн байланыштыруу

ngClass директивасынын жардамы менен тегге бир эле учурда CSS классдар тобун косуу жана өчүрүү мүмкүн. Директива объектти маани катары кабыл алат, анын ачкычтары классдар, ал эми маанилери - бул маанилер болот. Класс кошулат, эгер ага true мааниси коюлган болсо, жана өчүрүлөт, эгер false болсо.

Келгиле, иш жүзүндө карап көрөлү. Бизде төмөнкү класстар бар болсун:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Келгиле, блок үчүн бул классдарды кантип косуу жана өчүрүүнү мисалдар аркылуу карап көрөлү.

Мисал

Бир классты кошуп, экинчисин өчүрөлү:

<div [ngClass]="{blue: true, bold: false}">
	текст
</div>

Мисал

Классдардын абалдары класстын касиеттеринде сакталсын:

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

Класстын көрүнүшүн биздин касиеттердин маанилерине жараша байланыштыралы:

<div [ngClass]="{blue: isBlue, bold: isBold}">
	текст
</div>

Мисал

Касиетте классдар менен алардын абалдары бар толук объект болушу мүмкүн:

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

Бул объектини биздин блокко байланыштыралы:

<div [ngClass]="styles">
	текст
</div>

Мисал

Биздин объект үчүн маанилерди класстын башка касиеттеринен алууга болот:

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

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

Бул объектини биздин блокко байланыштыралы:

<div [ngClass]="styles">
	текст
</div>

Практикалык тапшырмалар

Эки CSS классты түзүңүз. Алардын бири блоктун фонун аныктасын, экинчиси - шрифттин өлчөмүн аныктасын.

Эки баскыч жасаңыз. Биринчи баскычты басуу биринчи классты toggle кылсын (косуп/өчүрө берсин), ал эми экинчи баскычты басуу - экинчи классты toggle кылсын.