[ngStyle] directive

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

Update an HTML element styles.

The styles are updated according to the value of the expression evaluation:

  • keys are style names with an optional .<unit> suffix (ie 'top.px', 'font-style.em'),
  • values are the values assigned to those properties (expressed in the given unit).
Source
<div [ngStyle]="{'font-size.px': 20, color: 'white', background: 'red'}">
  Text in this div is 20px size, white color on red background.
</div>
Result
Text in this div is 20px size, white color on red background.