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:

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

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

Recimo, da imamo lastnost, ki vsebuje barvo ozadja:

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

Uporabimo to lastnost kot vrednost za stil:

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

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

export class AppComponent {
	public isActive: boolean = true;
}

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

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

Podan je blok. Naredite tako, da bo prvi klik na blok obarval njegovo ozadje rdeče, drugi klik pa zeleno.

Podan je blok. Podan je gumb. Naredite tako, da bo klik na gumb podvojil širino bloka.