Skip to main content

Style

<div
  [style.name]="$.style$"
></div>

To set an element's css style whose value is updated by a reactive value of type ISetStylePropertyOrStringOrNull, write [style.name], where name is the style's property name.

If null is received, the property is removed. Else, the property is converted to a string and applied.

It's converted to something similar to this:

toObservable($.style$)((value) => div.style.setProperty('name', value));

Examples​

Observable of string​

<div
  [style.font-size]="single('14px')"
></div>

Output:

<div
  style="font-size: 14px"
></div>

Observable of IStyleProperty​

<div
  [style.color]="single({ value: 'red', priority: 'important')"
></div>

Output:

<div
  style="color: red !important"
></div>

Alternative syntax​

<div
  bind-style-name="$.style$"
></div>

Instead of using square brackets you may prefix the style's property name with bind-style-.