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

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-11T09:51:50.663

9

You can use ng-style to achieve this

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

edited Jul 11 '17 at 09:51

answered Jul 11 '17 at 09:46

Vivz

6,625
2
17
33

1

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 – Vivz Jul 11 '17 at 09:54
Flag as a duplicate would have been more efficient than answering this question. It has been asked many many times. – Mistalis Jul 11 '17 at 10:02
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 Jul 11 '17 at 10:08
@HeisenBerg Accept answer if it helped – Vivz Jul 11 '17 at 10:52
What is the difference between your answer and [`
`](https://stackoverflow.com/a/21364563/4927984)? – Mistalis Jul 11 '17 at 11:16
I agree that the answer is same as you described in your comment except the scope variable but it was different initially – Vivz Jul 11 '17 at 11:18
Sorry, but its not working. In chrome inspect, this is what I see
– Drunken Daddy Jul 11 '17 at 11:26
What is vitalItem.value.color ? – Vivz Jul 11 '17 at 11:27
vitalItem is a model that I've used in.component.ts – Drunken Daddy Jul 11 '17 at 11:28
Can you print {{vitalItem.value.color}} in your template and see if it is printing? – Vivz Jul 11 '17 at 11:38
I put it in place of vitalItem.value.date and its showing the color.. like #5cb85c – Drunken Daddy Jul 11 '17 at 11:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148887/discussion-between-vivz-and-heisenberg). – Vivz Jul 11 '17 at 11:45
I think you are using angular 2 So use [ngStyle] – Vivz Jul 11 '17 at 11:47
no I'm using angular 4 – Drunken Daddy Jul 11 '17 at 11:48
Same syntax for angular 2 and 4 for ng-style which is [ngStyle] – Vivz Jul 11 '17 at 11:49
yes, that worked. Thank you. – Drunken Daddy Jul 11 '17 at 13:32

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

1 Answers1