CSS-luokkien sidonta Angularissa

Angularissa voit ottaa CSS-luokkien käytön käyttöön ja pois käytöstä elementeille. Tämä tehdään elementin attribuutilla, joka on kirjoitettu seuraavassa muodossa:

html[class.luokan_nimi]="true tai 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, kuinka ottaa näitä luokkia käyttöön ja pois käytöstä elementeille.

Esimerkki

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

app/app.component.html<div [class.blue]="true" [class.bold]="false">
  teksti
</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 ominaisuuksiemme arvoista:

app/app.component.html<div [class.blue]="isBlue" [class.bold]="isBold">
  teksti
</div>

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

app/app.component.css.hidden {
  visibility: hidden;
}