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

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

html[style.styleProperty]="property value"

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

Пример

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

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

Пример

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

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

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

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

Пример

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

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

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

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

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