Масово свързване на CSS класове в Angular

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

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

app/app.component.css.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

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

Пример

Включваме един клас и изключваме друг:

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

Пример

Нека състоянията на класовете се съхраняват в свойства на класа:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

Свързваме видимостта на класа в зависимост от стойностите на нашите свойства:

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

Пример

В свойството може да има цял обект с класове и състояния:

app/app.component.tsexport class AppComponent {
  public styles = {
    blue: false,
    bold: true,
  }
}

Свързваме този обект с нашия блок:

app/app.component.html<div [ngClass]="styles">
  text
</div>

Пример

Може стойностите за нашия обект да се получат от други свойства на класа:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = false;
  public isBold: boolean = true;

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

Свързваме този обект с нашия блок:

app/app.component.html<div [ngClass]="styles">
  text
</div>

Практически задачи