Binding von CSS-Stilen in Angular

In Angular kann man auch direkt Stile für einen Block hinzufügen. Dies geschieht mit Hilfe eines Tag-Attributs, das im folgenden Format geschrieben wird:

html[style.stilEigenschaft]="Eigenschaftswert"

Dabei werden die Namen der CSS-Eigenschaften, die in sich einen Bindestrich haben, in unserem Fall in camelCase geschrieben. Schauen wir uns an Beispielen an, wie das funktioniert.

Beispiel

Legen wir einen Hintergrund für ein Element fest:

app/app.component.html<div [style.backgroundColor]="'blue'">
  text
</div>

Beispiel

Angenommen, wir haben eine Eigenschaft, die eine Hintergrundfarbe enthält:

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

Wenden wir diese Eigenschaft als Wert für den Stil an:

app/app.component.html<div [style.backgroundColor]="value">
  text
</div>

Beispiel

Angenommen, wir haben eine boolesche Eigenschaft:

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

Wir binden verschiedene Werte für die CSS- Eigenschaft in Abhängigkeit vom Inhalt der booleschen Eigenschaft. Verwenden wir dafür den ternären Operator:

app/app.component.html<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
  text
</div>

Praktische Aufgaben