Hromadná vazba CSS tříd v Angular

Pomocí direktivy ngClass lze zapínat a vypínat v tagu celou sadu CSS tříd. Direktiva jako hodnotu přijímá objekt, jehož klíče budou třídy a hodnoty - booleovské hodnoty. Třída bude zapnuta, pokud je pro ni nastavena hodnota true, a vypnuta, pokud false.

Podívejme se na praxi. Mějme následující třídy:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Podívejme se na příkladech, jak zapínat a vypínat tyto třídy pro blok.

Příklad

Zapneme jednu třídu a vypneme druhou:

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

Příklad

Nechť stavy tříd jsou uloženy ve vlastnostech třídy:

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

Navážme viditelnost třídy v závislosti na hodnotách našich vlastností:

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

Příklad

Ve vlastnosti může být celý objekt s třídami a stavy:

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

Navážme tento objekt na náš blok:

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

Příklad

Lze hodnoty pro náš objekt získat z jiných vlastností třídy:

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

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

Navážme tento objekt na náš blok:

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

Praktické úlohy

Vytvořte dvě CSS třídy. Nechť jedna z nich definuje pozadí bloku a druhá - velikost písma.

Vytvořte dvě tlačítka. Nechť kliknutí na první tlačítko přepíná první třídu a kliknutí na druhou - přepíná druhou třídu.