Povezovanje CSS stilov v Angular

V Angularju je mogoče tudi neposredno dodajati stile za blok. To naredimo z atributom oznake, zapisanim v naslednji obliki:

html[style.styleProperty]="property value"

Imena CSS lastnosti, ki vsebujejo defis, bodo v tem primeru zapisana v camelCase. Poglejmo si na primerih, kako to deluje.

Primer

Nastavimo ozadje elementu:

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

Primer

Recimo, da imamo lastnost, ki vsebuje barvo ozadja:

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

Uporabimo to lastnost kot vrednost za stil:

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

Primer

Recimo, da imamo neko logično (boolean) lastnost:

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

Povežimo različne vrednosti CSS lastnosti, odvisno od vsebine logične lastnosti. Uporabimo za to ternarni operator:

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

Praktične naloge