CODEWITHSUNDEEP
cssangular
dermoritz
dermoritz

Reputation: 13011

How to set background-color by angular bound value

I have a simple angular app (version 4.2.6) that displays tiles. I want to set the background color of those tiles by a value bound to tile object. While setting the content of the tile works as expected, setting the color fails:

<div *ngFor="let tile of tiles" class="col-md-3 col-sm-6 col-xs-12" >
    <div style="border-style: solid;width: 150px;height: 150px;background-color:{{tile.color}};" class="tile">{{tile.name}}</div>
</div>

How to set background-color by bound value tile.color (it contains color as hex string )?

Upvotes: 1

Views: 1182

Answers (2)

לבני מלכה
לבני מלכה

Reputation: 16251

You can use [style.backgroundColor]="tile.color"

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

Upvotes: 3

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41417

use the ngStyle directive 

<div [ngStyle]="{'background-color':tile.color}" style="border-style: solid;width: 150px;height: 150px;" class="tile">{{tile.name}}</div>

Upvotes: 1

Related Questions