Массовая привязка 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 класса. Пусть один из них определяет фон блока, а второй - размер шрифта.
Сделайте две кнопки. Пусть нажатие на первую кнопку тогглит первый класс, а нажатие на вторую - тогглит второй класс.