Inline CSS with angular interpolation

Question

I am working on Angular and is trying to set this div background color dynamically based on the color specified by "cardData.color".

E.g.

cardData = {id: '1', color: '#202020'};

I've tried the code shown below but it doesn't work.

<div style="background-color: {{cardData.color}}; padding: 10px 20px;"></div>

Is there any way, I can set the background color dynamically based on the object's color?? Thank you.

Possible duplicate of [Generate dynamic css based on variables angular](https://stackoverflow.com/questions/46047502/generate-dynamic-css-based-on-variables-angular) — Prashant Pimpale, Jul 11 '19 at 07:09

לבני מלכה · Accepted Answer · 2019-07-11T07:18:02.790

5

Use [] to get the value of cardData.color without {{}} also you can use style.backgroundColor.

<div [style.backgroundColor]="cardData.color" style="padding: 10px 20px;"></div>

Another way to do it:

[ngStyle]="{'background-color': cardData.color , 'padding': '10px 20px' }"

edited Jul 11 '19 at 07:18

answered Jul 11 '19 at 07:08

לבני מלכה

score 0 · Answer 2 · answered Jul 11 '19 at 07:12

0

Try like this:

<div [style.background-color]="cardData.color" style="padding: 10px 20px;"></div>

answered Jul 11 '19 at 07:12

Adrita Sharma

score 0 · Answer 3 · answered Jul 11 '19 at 07:16

0

Following angular style guide I would recommend to use [ngStyle]:

<div  [ngStyle]="{'background-color': cardData.color}">...</div >

answered Jul 11 '19 at 07:16

nitoloz

score 0 · Answer 4 · edited Jul 11 '19 at 08:17

0

Use [ngStyle] to have access to variables from the component.

<div [ngStyle]="{'background-color': cardData.color, 'padding': '10px 20px'}">Some Content</div>

edited Jul 11 '19 at 08:17

Ganesh

answered Jul 11 '19 at 07:17

valik

score 0 · Answer 5 · answered Jul 11 '19 at 07:23

0

You can use both ngStyle and style bindings

For: Style Binging

<div [style.backgroundColor] = "cardData.color"></div>

And For: ngStyle Binding

 <div [ngStyle] = "{ backgroundColor: cardData.color}"></div>

answered Jul 11 '19 at 07:23

Sreejith Ms

score 0 · Answer 6 · answered Jul 11 '19 at 10:13

0

below code snippet has worked for me

<div [ngStyle]="{'background-color':cardData.color}"></div>

answered Jul 11 '19 at 10:13

Rohan Patil

6 Answers6