Масавая прывязка 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 класы. Хай адзін з іх вызначае фон блока, а другі - памер шрыфту.

Зрабіце дзве кнопкі. Хай націск на першую кнопку тоггліць першы клас, а націск на другую - тоггліць другі клас.