Wiązanie stylów CSS w Angularze

W Angularze można również bezpośrednio dodawać style dla bloku. Robi się to za pomocą atrybutu tagu, napisanego w następującym formacie:

[style.styleProperty]="property value"

Jednocześnie nazwy właściwości CSS, które mają w sobie myślnik, w naszym przypadku będą pisane w <camelCase>. Spójrzmy na przykładach, jak to działa.

Przykład

Ustawmy tło elementowi:

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

Przykład

Załóżmy, że mamy pewną właściwość, zawierającą kolor tła:

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

Zastosujmy tę właściwość jako wartość dla stylu:

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

Przykład

Załóżmy, że mamy pewną właściwość boolowską:

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

Będziemy wiązać różne wartości właściwości CSS w zależności od zawartości właściwości boolowskiej. Użyjmy do tego operatora trójargumentowego:

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

Zadania praktyczne

Dany jest blok. Spraw, aby pierwsze kliknięcie na blok kolorowało go na czerwono, a drugie kliknięcie - na zielono.

Dany jest blok. Dany jest przycisk. Spraw, aby naciśnięcie przycisku podwajało szerokość bloku.