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:

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

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

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

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

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

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

Majme nejakú booleovskú vlastnosť:

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

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

Daný blok. Urobte tak, aby prvý klik na blok zafarbil na červenú farbu, a druhý klik - na zelenú.

Daný blok. Dané tlačidlo. Urobte tak, aby stlačenie tlačidla zväčšilo šírku bloku dvakrát.