Databinding av CSS-stiler i Angular
I Angular kan man også direkte legge til stiler for et blokk-element. Dette gjøres med hjelp av en tagg-attributt, skrevet i følgende format:
[style.styleProperty]="property value"
Samtidig vil navnene på CSS-egenskaper som har bindestrek inni seg, i vårt tilfelle bli skrevet i camelCase. La oss se på eksempler på hvordan dette fungerer.
Eksempel
La oss sette bakgrunn for et element:
<div [style.backgroundColor]="'blue'">
text
</div>
Eksempel
Anta at vi har en egenskap som inneholder bakgrunnsfargen:
export class AppComponent {
public value: string = 'red';
}
La oss bruke denne egenskapen som verdi for stilen:
<div [style.backgroundColor]="value">
text
</div>
Eksempel
Anta at vi har en boolsk egenskap:
export class AppComponent {
public isActive: boolean = true;
}
La oss binde forskjellige verdier til CSS- egenskapen avhengig av innholdet i den boolske egenskapen. Vi bruker ternær operatør for dette:
<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
text
</div>
Praktiske oppgaver
Det er gitt en blokk. Gjør slik at det første klikket på blokken farger den i rødt, og det andre klikket - i grønt.
Det er gitt en blokk. Det er gitt en knapp. Gjør slik at et trykk på knappen dobler blokkens bredde.
