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:

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

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

Voorbeeld

Stel we hebben een eigenschap die een achtergrondkleur bevat:

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

Laten we deze eigenschap toepassen als waarde voor de stijl:

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

Voorbeeld

Stel we hebben een booleaanse eigenschap:

app/app.component.tsexport 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:

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

Praktische opdrachten