angularangular5

Angular5 - set color of div container dynamically

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>