Vázání CSS stylů v Angular

V Angular lze také přímo přidávat styly pro blok. To se dělá pomocí atributu tagu, zapsaného v následujícím formátu:

html[style.styleProperty]="property value"

Přičemž názvy CSS vlastností, které mají uvnitř sebe pomlčku, budou v našem případě psány v camelCase. Podívejme se na příkladech, jak to funguje.

Příklad

Nastavme pozadí elementu:

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

Příklad

Předpokládejme, že máme nějakou vlastnost, obsahující barvu pozadí:

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

Aplikujme tuto vlastnost jako hodnotu pro styl:

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

Příklad

Předpokládejme, že máme nějakou booleovskou vlastnost:

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

Budeme vázat různé hodnoty CSS vlastnosti v závislosti na obsahu booleovské vlastnosti. Použijeme k tomu ternární operátor:

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

Praktické úlohy