How to set background color for a div dynamically in angular? [duplicate]

Question

I'm very new to angular. I'm getting the background color to be shown from a backend api. I want to set it as a div's background color:

I've tried:

<div style="background-color: {{vitalItem.value.color}}" >

but the color is not set. In console, it shows:

WARNING: sanitizing unsafe style value background-color: #d9534f (see http://g.co/ng/security#xss)

Any help is appreciated..

EDIT:

Here's my html

<div class="latest-reading-box">
     <div class="latest-reading-container value-contain-type" ng-style="{'background-color': vitalItem.value.color}">
         <p class="p-time">{{vitalItem.value != null ? vitalItem.value.date : ""}}</p>
         <h3 class="latest-value">{{vitalItem.value != null ? vitalItem.value.value : ""}}</h3>
         <p class="type-value">{{vitalItem.value != null && vitalItem.value.vitalEntryType != 0 ?
                                                  getVitalEntryTypeName(vitalItem.value.vitalEntryType): ""}}</p>
     </div>
</div>

In chrome's inspect, this is what see:

<div _ngcontent-c1="" class="latest-reading-container value-contain-type" ng-style="{'background-color': vitalItem.value.color}">
    <p _ngcontent-c1="" class="p-time">08 Jul, 2017</p>
    <h3 _ngcontent-c1="" class="latest-value">67</h3>
    <p _ngcontent-c1="" class="type-value"></p>
</div>

everything except vitalItem.value.color is showing their value. Why is ng-style not working?

Answer 1

You can use ng-style to achieve this

<div ng-style="{'background-color':vitalItem.value.color}" >