Data-binding af CSS-klasser i Angular

I Angular kan du aktivere og deaktivere anvendelsen af en CSS-klasse for en blok. Dette gøres ved hjælp af et tag-attribut, skrevet i følgende format:

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

Lad os se på det i praksis. Antag, at vi har følgende klasser:

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

.bold {
  font-weight: bold;
}

Lad os se på eksempler på, hvordan man aktiverer og deaktiverer disse klasser for en blok.

Eksempel

Lad os aktivere én klasse og deaktivere en anden:

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

Eksempel

Antag, at klassernes tilstande er gemt i egenskaber for klassen:

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

Lad os binde klassens synlighed afhængigt af vores egenskabers værdier:

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

Praktiske opgaver

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