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:

[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:

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

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

export class AppComponent {
	public value: string = 'red';
}

Aplikujme tuto vlastnost jako hodnotu pro styl:

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

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

export 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:

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

Je dán blok. Zařiďte, aby první kliknutí na blok jej obarvilo na červenou barvu, a druhé kliknutí - na zelenou.

Je dán blok. Je dáno tlačítko. Zařiďte, aby stisknutí tlačítka zdvojnásobilo šířku bloku.