Masowe wiązanie klas CSS w Angularze

Za pomocą dyrektywy ngClass można włączać i wyłączać w tagu od razu zestaw klas CSS. Dyrektywa jako wartość przyjmuje obiekt, którego kluczami będą klasy, a wartościami - wartości logiczne. Klasa będzie włączona, jeśli dla niej ustawiono wartość true, i wyłączona, jeśli false.

Spójrzmy na praktyce. Załóżmy, że mamy następujące klasy:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Spójrzmy na przykładach, jak włączać i wyłączać te klasy dla bloku.

Przykład

Włączmy jedną klasę i wyłączmy drugą:

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

Przykład

Załóżmy, że stany klas przechowywane są we właściwościach klasy:

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

Powiążmy widoczność klasy w zależności od wartości naszych właściwości:

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

Przykład

We właściwości może być cały obiekt z klasami i stanami:

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

Powiążmy ten obiekt z naszym blokiem:

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

Przykład

Można wartości dla naszego obiektu uzyskać z innych właściwości klasy:

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

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

Powiążmy ten obiekt z naszym blokiem:

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

Zadania praktyczne

Utwórz dwie klasy CSS. Niech jedna z nich określa tło bloku, a druga - rozmiar czcionki.

Zrób dwa przyciski. Niech kliknięcie pierwszego przycisku przełącza pierwszą klasę, a kliknięcie drugiego - przełącza drugą klasę.