Massebinding av CSS-klasser i Angular

Med direktivet ngClass kan man slå av og på en samling CSS-klasser i en tagg. Direktivet tar imot et objekt som verdi, hvor nøklene er klassene, og verdiene er boolske verdier. Klassen vil være aktivert hvis den er satt til verdien true, og deaktivert hvis 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 vi slår av og på disse klassene for en blokk.

Eksempel

La oss aktivere en klasse og deaktivere en annen:

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

Eksempel

La tilstandene til klassene lagres i egenskapene 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 [ngClass]="{blue: isBlue, bold: isBold}">
  text
</div>

Eksempel

I en egenskap kan det være et helt objekt med klasser og tilstander:

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

La oss binde dette objektet til vår blokk:

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

Eksempel

Man kan hente verdiene for objektet vårt fra andre egenskaper i klassen:

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

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

La oss binde dette objektet til vår blokk:

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

Praktiske oppgaver