Масовно врзување на CSS класи во Angular

Со помош на директивата ngClass може да се вклучуваат и исклучуваат во тагот одеднаш множество CSS класи. Директивата како вредност прима објект, чии клучеви ќе бидат класи, а вредностите - булови вредности. Класата ќе биде вклучена ако за неа е поставена вредност true, и исклучена ако false.

Да ја видиме оваа функционалност во пракса. Нека имаме следниве класи:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Да погледнеме на примери како се вклучуваат и исклучуваат овие класи за блокот.

Пример

Да вклучиме една класа и да исклучиме друга:

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

Пример

Нека состојбите на класите се чуваат во својства на класата:

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

Да ја врземе видливоста на класата во зависност од вредностите на нашите својства:

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

Пример

Во својството може да има цел објект со класи и состојби:

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

Да го врземе овој објект на нашиот блок:

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

Пример

Вредностите за нашиот објект може да се добијат од други својства на класата:

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

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

Да го врземе овој објект на нашиот блок:

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

Практични задачи

Создадете две CSS класи. Нека едната од нив ја дефинира позадината на блокот, а втората - големината на фонтот.

Направете две копчиња. Нека кликнувањето на првото копче го вклучува/исклучува (toggle) првата класа, а кликнувањето на второто - ја вклучува/исклучува втората класа.