Hromadná vazba CSS tříd v Angular

Pomocí direktivy ngClass lze zapínat a vypínat v tagu celou sadu CSS tříd. Direktiva jako hodnotu přijímá objekt, jehož klíče budou třídy a hodnoty - booleovské hodnoty. Třída bude zapnuta, pokud je pro ni nastavena hodnota true, a vypnuta, pokud false.

Podívejme se na praxi. Mějme následující třídy:

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

.bold {
  font-weight: bold;
}

Podívejme se na příkladech, jak zapínat a vypínat tyto třídy pro blok.

Příklad

Zapneme jednu třídu a vypneme druhou:

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

Příklad

Nechť stavy tříd jsou uloženy ve vlastnostech třídy:

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

Navážme viditelnost třídy v závislosti na hodnotách našich vlastností:

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

Příklad

Ve vlastnosti může být celý objekt s třídami a stavy:

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

Navážme tento objekt na náš blok:

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

Příklad

Lze hodnoty pro náš objekt získat z jiných vlastností třídy:

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

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

Navážme tento objekt na náš blok:

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

Praktické úlohy