Hromadné priradenie CSS tried v Angular

Pomocou direktívy ngClass je možné zapínať a vypínať v elemente naraz sadu CSS tried. Direktíva ako hodnotu prijíma objekt, ktorého kľúčmi budú triedy a hodnotami - booleovské hodnoty. Trieda bude zapnutá, ak je pre ňu nastavená hodnota true, a vypnutá, ak false.

Pozrime sa na to v praxi. Nech máme nasledujúce triedy:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Pozrime sa na príklady, ako zapínať a vypínať tieto triedy pre blok.

Príklad

Zapnime jednu triedu a vypnime druhú:

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

Príklad

Nech stavy tried sú uložené v vlastnostiach triedy:

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

Prepojme viditeľnosť triedy v závislosti od hodnôt našich vlastností:

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

Príklad

Vo vlastnosti môže byť celý objekt s triedami a stavmi:

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

Prepojme tento objekt s naším blokom:

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

Príklad

Hodnoty pre náš objekt je možné získať z iných vlastností triedy:

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

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

Prepojme tento objekt s naším blokom:

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

Praktické úlohy

Vytvorte dve CSS triedy. Nech jedna z nich definuje pozadie bloku a druhá - veľkosť písma.

Vytvorte dva tlačidlá. Nech kliknutie na prvé tlačidlo prepne prvú triedu a kliknutie na druhé - prepne druhú triedu.