Lidhja e shumëfishtë e klasave CSS në Angular

Me ndihmën e direktivës ngClass mund të aktivizojmë dhe çaktivizojmë një grup klasash CSS njëkohësisht në një tag. Direktiva merr si vlerë një objekt, ku çelësat e tij do të jenë klasat, dhe vlerat e tij - vlera boolean. Klasa do të aktivizohet nëse për të është vendosur vlera true, dhe do të çaktivizohet nëse është false.

Le ta shohim në praktikë. Le të supozojmë se kemi klasat e mëposhtme:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Le të shohim me shembuj se si të aktivizojmë dhe çaktivizojmë këto klasa për një bllok.

Shembull

Le të aktivizojmë një klasë dhe të çaktivizojmë një tjetër:

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

Shembull

Le të supozojmë se gjendjet e klasave ruhen në vetitë e klasës:

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

Le të lidhim dukshmërinë e klasës në varësi të vlerave të vetive tona:

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

Shembull

Në veti mund të ketë një objekt të tërë me klasat dhe gjendjet e tyre:

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

Le ta lidhim këtë objekt me bllokun tonë:

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

Shembull

Vlerat për objektin tonë mund të merren nga veti të tjera të klasës:

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

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

Le ta lidhim këtë objekt me bllokun tonë:

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

Detyra praktike

Krijoni dy klasa CSS. Le të supozojmë se njëra prej tyre përcakton sfondin e bllokut, dhe e dyta - madhësinë e shkronjave.

Krijoni dy butona. Le të supozojmë se klikimi në butonin e parë toggle klasën e parë, dhe klikimi në të dytin - toggle klasën e dytë.