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:

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

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

Eksempel

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

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

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

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

Eksempel

Antag, at vi har en boolsk egenskab:

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

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

Praktiske opgaver