How to bind a object value to ngStyle?

Asked Jun 12 '18 at 08:54

Active Jun 12 '18 at 08:58

Viewed 613 times

I am trying to change the color of a button using ngStyle and the array of object return from my server side. From my server, I am getting an array of objects

{
  id: 1,
  name: "User 1",
  designation: "Software Developer",
  isActive: "Yes",
  IsActiveStyle: "blue"
},
{
  id: 2,
  name: "User 2",
  designation: "Software Developer",
  isActive: "Yes",
  IsActiveStyle: "blue"
},
{
  id: 3,
  name: "User 3",
  designation: "Software Tester",
  isActive: "No",
  IsActiveStyle: "red"
},
{
  id: 4,
  name: "User 4",
  designation: "Tester",
  isActive: "Yes",
  IsActiveStyle: "blue"
}

I am trying to bind, my IsActiveStyle to ngStyle with the following code

<button [ngStyle]="{'background-color':item.IsActiveStyle}">{{item.isActive}}</button>

but unable to understand, why it is not changing the color of my button.

is there any better way to do this?

asked Jun 12 '18 at 08:54

DevProf

use `backgroundColor` instead of `background-color` according to https://stackoverflow.com/questions/40676203/set-style-dynamically-in-angular2 – nerding_it Jun 12 '18 at 08:57
@sriharsha_bhat the examples [in the docs](https://angular.io/api/common/NgStyle) use kebab-style syntax – jonrsharpe Jun 12 '18 at 08:58
[Works for me](https://stackblitz.com/edit/angular-56rasy) – bugs Jun 12 '18 at 09:07
it's working can you share html template code – Muhammed Albarmavi Jun 12 '18 at 09:10
can you share a working example? – firegloves Jun 12 '18 at 10:08

How to bind a object value to ngStyle?

0 Answers0