Data-binding av CSS-stilar i Angular

I Angular kan man också direkt lägga till stilar för ett block. Detta görs med hjälp av ett tagg-attribut, skrivet i följande format:

html[style.styleProperty]="egenskapsvärde"

CSS-egenskapsnamn som innehåller bindestreck skrivs i det här fallet i camelCase. Låt oss titta på exempel på hur det här fungerar.

Exempel

Låt oss sätta bakgrunden för ett element:

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

Exempel

Antag att vi har en egenskap som innehåller bakgrundsfärgen:

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

Låt oss använda den här egenskapen som värde för stilen:

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

Exempel

Antag att vi har en boolesk egenskap:

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

Låt oss binda olika värden till CSS- egenskapen beroende på innehållet i den booleska egenskapen. Vi använder ternary operator för detta:

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

Praktiska uppgifter