Связывание стилей и NgStyle в Angular 2

В шаблоны Angular 2 легко привязать встроенный стиль. Например, вот как можно связать одно значение стиля:

<p [style.background-color]="'darkorchid'">
  Quite something!
</p>

Вы также можете указать единицу измерения, здесь, например, мы устанавливаем единицу измерения в em, но px, % или rem можно также использовать:

<p [style.font-size.em]="'3'">
  A paragraph at 3em!
</p>

А вот как можно условно установить значение стиля в зависимости от свойства компонента:

<p [style.font-size.px]="isImportant ? '30' : '16'">
  Some text that may be important.
</p>

NgStyle для нескольких значений

Простая привязка стиля отлично подходит для одиночных значений, но для применения нескольких стилей проще всего использовать NgStyle:

<p [ngStyle]="myStyles">
  You say tomato, I say tomato
</p>

И тогда myStyles будет свойством в компоненте, который содержит объект с именами свойств css в качестве ключей, например:

myStyles = {
'background-color': 'lime',
'font-size': '20px',
'font-weight': 'bold'
}

Или это может быть встроено, например:

<p [ngStyle]="{'background-color': 'lime',
    'font-size': '20px',
    'font-weight': 'bold'}">
  You say tomato, I say tomato
</p>

Или объект может быть возвращаемым значением метода:

<p [ngStyle]="setMyStyles()">
  You say tomato, I say tomato
</p>

В связанном классе компонентов

setMyStyles() {
  let styles = {
    'background-color': this.user.isExpired ? 'red' : 'transparent',
    'font-weight': this.isImportant ? 'bold' : 'normal'
  };
  return styles;
}

Смотрите также

• Привязка класса + NgClass