Масовно везивање 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}">
  текст
</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}">
  текст
</div>

Пример

У својству може бити читав објекат са класама и стањима:

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

Вежимо тај објекат за наш блок:

app/app.component.html<div [ngClass]="styles">
  текст
</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">
  текст
</div>

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