Databinding av CSS-klasser i Angular

I Angular kan man slå av og på bruk av CSS-klasse for en blokk. Dette gjøres ved hjelp av en tag-attributt, skrevet i følgende format:

html[class.klassenavn]="true eller false"

La oss se på det i praksis. La oss si at vi har følgende klasser:

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

.bold {
  font-weight: bold;
}

La oss se på eksempler på hvordan man slår av og på disse klassene for en blokk.

Eksempel

La oss slå på én klasse og slå av en annen:

app/app.component.html<div [class.blue]="true" [class.bold]="false">
  text
</div>

Eksempel

La oss si at tilstandene til klassene lagres i egenskaper til klassen:

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

La oss binde synligheten til klassen avhengig av verdiene til våre egenskaper:

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

Praktiske oppgaver

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