Massebinding af CSS-klasser i Angular

Med direktivet ngClass kan man tænde og slukke for et sæt af CSS-klasser i et tag på én gang. Direktivet tager imod en objekt, hvis nøgler er klasser, og hvis værdier er boolske værdier. Klassen vil blive tilknyttet, hvis den er sat til værdien true, og frakoblet, hvis den er 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 tænder og slukker for disse klasser for en blok.

Eksempel

Lad os aktivere én klasse og deaktivere en anden:

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

Eksempel

Antag, at klassernes tilstande er gemt i klassens egenskaber:

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 [ngClass]="{blue: isBlue, bold: isBold}">
  tekst
</div>

Eksempel

En egenskab kan være et helt objekt med klasser og tilstande:

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

Lad os binde dette objekt til vores blok:

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

Eksempel

Man kan hente værdierne til vores objekt fra andre egenskaber i klassen:

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

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

Lad os binde dette objekt til vores blok:

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

Praktiske opgaver