Hromadné priradenie CSS tried v Angular

Pomocou direktívy ngClass je možné zapínať a vypínať v elemente naraz sadu CSS tried. Direktíva ako hodnotu prijíma objekt, ktorého kľúčmi budú triedy a hodnotami - booleovské hodnoty. Trieda bude zapnutá, ak je pre ňu nastavená hodnota true, a vypnutá, ak false.

Pozrime sa na to v praxi. Nech máme nasledujúce triedy:

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

.bold {
  font-weight: bold;
}

Pozrime sa na príklady, ako zapínať a vypínať tieto triedy pre blok.

Príklad

Zapnime jednu triedu a vypnime druhú:

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

Príklad

Nech stavy tried sú uložené v vlastnostiach triedy:

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

Prepojme viditeľnosť triedy v závislosti od hodnôt našich vlastností:

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

Príklad

Vo vlastnosti môže byť celý objekt s triedami a stavmi:

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

Prepojme tento objekt s naším blokom:

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

Príklad

Hodnoty pre náš objekt je možné získať z iných vlastností triedy:

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

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

Prepojme tento objekt s naším blokom:

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

Praktické úlohy