Väzba CSS štýlov v Angular

V Angular je tiež možné priamo pridať štýly pre blok. To sa robí pomocou atribútu tagu, napísaného v nasledujúcom formáte:

html[style.styleProperty]="property value"

Pričom názvy CSS vlastností, ktoré majú v sebe pomlčku, v našom prípade budú písané v camelCase. Pozrime sa na príklady, ako to funguje.

Príklad

Nastavme pozadie elementu:

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

Príklad

Majme nejakú vlastnosť, obsahujúcu farbu pozadia:

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

Aplikujme túto vlastnosť ako hodnotu pre štýl:

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

Príklad

Majme nejakú booleovskú vlastnosť:

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

Budeme viazať rôzne hodnoty CSS vlastnosti v závislosti od obsahu booleovskej vlastnosti. Použime na to ternárny operátor:

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

Praktické úlohy