CSS-tyylien sidonta Angularissa

Angularissa voidaan myös suoraan lisätä tyylejä lohkolle. Tämä tehdään tagi-attribuutilla, joka on kirjoitettu seuraavassa muodossa:

html[style.styleProperty]="property value"

CSS-ominaisuuksien nimet, joissa on välimerkki, kirjoitetaan tässä tapauksessa camelCase-muodossa. Katsotaan esimerkein, miten tämä toimii.

Esimerkki

Asetetaan tausta elementille:

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

Esimerkki

Olkoon meillä jokin ominaisuus, joka sisältää taustavärin:

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

Käytetään tätä ominaisuutta arvona tyylille:

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

Esimerkki

Olkoon meillä jokin totuusarvoinen ominaisuus:

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

Sidotaan erilaisia arvoja CSS- ominaisuuteen totuusarvon sisällöstä riippuen. Käytetään tähän ternary operatoria:

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

Käytännön tehtävät