Angularда CSS классларини оммовий боглов

ngClass директиваси ёрдамида тегга CSS класслари тўпламини киритиш ва чиқариш мумкин. Директива қиймат сифатида объектни қабул қилади, унинг калитлари синфлар бўлади, қийматлари эса - булеан қийматлар. Класс учун true қиймати белгиланган бўлса, у киритилади, false бўлса эса, чиқарилади.

Амалиётда кўрамиз. Бизда куйидаги синфлар мавжуд бўлсин:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Блок учущ бу синфлари қандай киритиш ва чиқаришни мисолларда кўрамиз.

Мисол

Битта синфни киритамиз ва иккинчисин чиқарамиз:

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

Мисол

Синфларнинг ҳолатлари класснинг хусусиятларида сақлансин:

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

Синфларнинг кўринишини бизнинг хусусиятларимизнинг қийматларига богланг:

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

Мисол

Хусусиятда синфлар ва уларнинг ҳолатлари билан бутун объект бўлиши мумкин:

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

Бу объектни бизнинг блокга боглаймиз:

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

Мисол

Объектимиз учун қийматларни класснинг бошқа хусусиятларидан олиш мумкин:

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

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

Бу объектни бизнинг блокга боглаймиз:

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

Амалий машқлар

Иккита CSS класса яратинг. Улардан бири блокнинг фонгини, иккинчиси эса шрифт ўлчамини аникласин.

Иккита тугма яратинг. Биринчи тугма босиш биринчи синфни, иккинчи тугма босиш эса иккинчи синфни тоггласин.