Привязка CSS стилей в Angular

В Angular также можно непосредственно Добавлять стили для блока. Это делается с помощью атрибута тега, написанного в следующем формате:

[style.стилевоеСвойство]="значение свойства"

При этом имена CSS свойств, которые имеют внутри себя дефис, в нашем случае будут писаться в camelCase. Давайте посмотрим на примерах, как это работает.

Пример

Зададим фон элементу:

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

Пример

Пусть у нас есть некоторое свойство, содержащее цвет фона:

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

Применим это свойство в качестве значения для стиля:

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

Пример

Пусть у нас есть некоторое булево свойство:

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

Будем привязывать различные значения CSS свойству в зависимости от содержимого булевого свойства. Используем для этого тернарный оператор:

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

Практические задачи

Дан блок. Сделайте так, чтобы первый клик на блок красил его в красный цвет, а второй клик - в зеленый.

Дан блок. Дана кнопка. Сделайте так, чтобы нажатие на кнопку увеличивало ширину блока в два раза.