CSS-luokkien joukkosidonta Angularissa

ngClass-direktiivillä voidaan kytkeä päälle ja pois useita CSS-luokkia tägissä kerralla. Direktiivi saa arvokseen objektin, jonka avaimet ovat luokkia ja arvot ovat totuusarvoja. Luokka otetaan käyttöön, jos sille on asetettu arvo true, ja poistetaan käytöstä, jos false.

Katsotaan käytännössä. Oletetaan, että meillä on seuraavat luokat:

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

.bold {
  font-weight: bold;
}

Katsotaan esimerkein, miten näitä luokkia otetaan käyttöön ja poistetaan käytöstä lohkolla.

Esimerkki

Otetaan yksi luokka käyttöön ja poistetaan toinen käytöstä:

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

Esimerkki

Oletetaan, että luokkien tilat tallennetaan luokan ominaisuuksiin:

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

Sidotaan luokan näkyvyys riippuen meidän ominaisuuksiemme arvoista:

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

Esimerkki

Ominaisuus voi sisältää kokonaisen objektin, jossa on luokat ja tilat:

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

Sidotaan tämä objekti lohkoomme:

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

Esimerkki

Objektin arvot voidaan hakea muista luokan ominaisuuksista:

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

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

Sidotaan tämä objekti lohkoomme:

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

Käytännön tehtävät