[Fixed] Angular5 – set color of div container dynamically

Issue

With AngularJS this worked fine:

<div style="width:10px;height:10px;background-color:{{user.color}}"></div>

but with Angular5 it doesn’t. How to do it with Angular5?

Solution

<div style="width:10px;height:10px;" [ngStyle]="{'background-color': user.color}">...</div>

or

<div [style.background-color]="user.color">...</div>

Docs

How to use ngStyle

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

<some-element [ngStyle]="objExp">...</some-element>