Search code examples
cssangularinlinebackground-colorstring-interpolation

Inline CSS with angular interpolation

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.

Solution

  • 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' }"