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?

Vivz · Accepted Answer · 2017-07-11 09:51:50Z

9

You can use ng-style to achieve this

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

edited Jul 11, 2017 at 9:51

answered Jul 11, 2017 at 9:46

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Vivz Over a year ago

Ohh I thought u were trying to add style in class which is wrong syntax but if you want to add dynamically, you have to use ng-style

Mistalis Over a year ago

Flag as a duplicate would have been more efficient than answering this question. It has been asked many many times.

Vivz Over a year ago

But the question OP asked was different initially, he was trying to add a style to a class dynamically and the later on he updated the question. And that's when I flagged it as a duplicate. The answerers here doesn't deserve a downvote as myself volunteered to answer this before OP updated the question . @Mistalis

Vivz Over a year ago

@HeisenBerg Accept answer if it helped

Mistalis Over a year ago

What is the difference between your answer and <div ng-style="{'background-color': data.backgroundCol}"></div>?

|

Collectives™ on Stack Overflow

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

1 Answer 1

16 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Linked

Related