CSS-stijlen binden in Angular

In Angular kun je ook direct stijlen toevoegen voor een blok. Dit wordt gedaan met behulp van een tag-attribuut, geschreven in het volgende formaat:

[style.styleProperty]="eigenschap waarde"

Hierbij zullen CSS-eigenschapsnamen die een koppelteken bevatten, in ons geval worden geschreven in camelCase. Laten we met voorbeelden bekijken hoe dit werkt.

Voorbeeld

Laten we een achtergrond instellen voor een element:

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

Voorbeeld

Stel we hebben een eigenschap die een achtergrondkleur bevat:

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

Laten we deze eigenschap toepassen als waarde voor de stijl:

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

Voorbeeld

Stel we hebben een booleaanse eigenschap:

export class AppComponent {
	public isActive: boolean = true;
}

We gaan verschillende waarden binden aan de CSS eigenschap afhankelijk van de inhoud van de booleaanse eigenschap. Laten we hiervoor de dubbele punt operator gebruiken:

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

Praktische opdrachten

Gegeven een blok. Zorg ervoor dat de eerste klik op het blok het kleurt in rood, en de tweede klik - in groen.

Gegeven een blok. Gegeven een knop. Zorg ervoor dat een klik op de knop de breedte van het blok verdubbelt.