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.
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' }"
Try like this:
<div [style.background-color]="cardData.color" style="padding: 10px 20px;"></div>
backgroundColor no background-color!!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>
Use [ngStyle] to have access to variables from the component.
<div [ngStyle]="{'background-color': cardData.color, 'padding': '10px 20px'}">Some Content</div>
below code snippet has worked for me
<div [ngStyle]="{'background-color':cardData.color}"></div>
