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 класы жасаңыз. Олардың біреуі блок фонын анықтасын, ал екіншісі - қаріп өлшемін анықтасын.

Екі батырма жасаңыз. Бірінші батырманы басу бірінші класты ауыстырсын, ал екіншісін басу - екінші класты ауыстырсын.