CSS-i stiilide sidumine Angularis

Angularis on võimalik ka otse lisada stiile plokile. Seda tehakse järgmises vormingus kirjutatud sildi atribuudi abil:

html[style.styleProperty]="property value"

Sel juhul kirjutatakse CSS-i atribuutide nimed, millel on sidekriipsu sees, meie puhul camelCase'ina. Vaatame näidetega, kuidas see töötab.

Näide

Määrame elemendile tausta:

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

Näide

Oletame, et meil on mingi atribuut, mis sisaldab tausta värvi:

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

Rakendame seda atribuuti väärtusena stiilile:

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

Näide

Oletame, et meil on mingi boolean atribuut:

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

Seome erinevad väärtused CSS atribuudile sõltuvalt boolean atribuudi sisust. Kasutame selleks ternaarset operaatorit:

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

Praktilised ülesanded