CSS osztályok tömeges hozzárendelése Angularban

A ngClass direktíva segítségével egy HTML elemhez egyszerre több CSS osztályt kapcsolhatunk be vagy ki. A direktíva egy objektumot vár értékül, amelynek kulcsai az osztályok, értékei pedig logikai értékek. Egy osztály akkor lesz aktiválva, ha a hozzá tartozó érték true, és deaktiválva, ha false.

Nézzük a gyakorlatban. Tegyük fel, hogy a következő osztályaink vannak:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Nézzünk példákat arra, hogyan lehet ezeket az osztályokat be- és kikapcsolni egy elemhez.

Példa

Kapcsoljunk be egy osztályt és kapcsoljunk ki egy másikat:

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

Példa

Tegyük fel, hogy az osztályok állapotai az osztály tulajdonságaiban tárolódnak:

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

Kössük az osztályok láthatóságát a tulajdonságaink értékeihez:

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

Példa

A tulajdonság maga is lehet egy teljes objektum osztályokkal és állapotaikkal:

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

Kössük ezt az objektumot az elemünkhöz:

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

Példa

Az objektumunk értékeit megkaphatjuk más osztály tulajdonságoktól is:

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

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

Kössük ezt az objektumot az elemünkhöz:

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

Gyakorlati feladatok

Hozz létre két CSS osztályt. Az egyik határozza meg az elem háttérszínét, a másik pedig a betűméretet.

Készíts két gombot. Az első gomb nyomásra váltogatja az első osztályt, a második gomb pedig a második osztályt.