Масовно везивање CSS класа у Angular

Уз помоћ директиве 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 класе. Нека једна од њих дефинише позадину блока, а друга - величину фонта.

Направите два дугмета. Нека клик на прво дугме укључи/искључи прву класу, а клик на друго - укључи/искључи другу класу.