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:

[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:

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

Beispiel

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

export class AppComponent {
	public value: string = 'red';
}

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

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

Beispiel

Angenommen, wir haben eine boolesche Eigenschaft:

export 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:

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

Praktische Aufgaben

Gegeben ist ein Block. Sorgen Sie dafür, dass der erste Klick auf den Block ihn rot färbt, und der zweite Klick - ihn grün färbt.

Gegeben ist ein Block. Gegeben ist ein Button. Sorgen Sie dafür, dass ein Klick auf den Button die Breite des Blocks verdoppelt.