Style List

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

To define the style of an element updated by a reactive value of type IStylePropertiesMap, write [style...].

Only the previously received styles are removed, and the new ones added, so it's possible to cumulate this bind with [style.prop-name] for example.

It's converted to something similar to this:

toObservable($.styles$)((styles) => div.setAttribute('style', styles));

info

When possible, you should prefer the [style.name] syntax, as it tends to be more readable.

Example

<div
  [style.font-size]="single('14px')"
  [style...]="single(new Map([['line-height', { value: '20px' }]]))"
></div>

Output:

<div
  style="font-size: 14px; line-height: 20px"
></div>

info

To convert a "raw" list of style properties into a IStylePropertiesMap, you may use the function toStylePropertiesMap.

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

Instead of using [style...] you may write bind-style---.