Tilføjelse af CSS-stilarter i Angular

I Angular kan man også direkte tilføje stilarter for en blok. Dette gøres med hjælp af et tag-attribut, skrevet i følgende format:

[style.styleProperty]="egenskabsværdi"

Her vil navnene på CSS-egenskaber, som indeholder bindestreg, i vores tilfælde blive skrevet i camelCase. Lad os se på eksempler på, hvordan dette virker.

Eksempel

Lad os angive baggrund for et element:

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

Eksempel

Antag, at vi har en egenskab, der indeholder baggrundsfarven:

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

Lad os anvende denne egenskab som værdi for stilen:

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

Eksempel

Antag, at vi har en boolsk egenskab:

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

Lad os binde forskellige værdier til CSS-egenskaben afhængigt af indholdet af den boolske egenskab. Vi bruger ternær operatoren til dette:

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

Praktiske opgaver

Der er givet en blok. Gør så, at det første klik på blokken farver den rød, og det andet klik - grøn.

Der er givet en blok. Der er givet en knap. Gør så, at et tryk på knappen fordobler blokkens bredde.