how to set dynamic css style for [ngStyle]

Question

I am looking for setting dynamic css for [ngStyle] from my component ms-toolbar I have set html as

<md-toolbar class="ms-toolbar" [ngStyle]="StylingToolbar">
</md-toolbar>

and from ts I have initialize as

    export class AppbarComponent {
     StylingToolbar = {
    'background-color': '00bcd4',
    'color':'white'
  };
}

But on rendering it is not working. On rendering It is setting element as

<md-toolbar _ngcontent-alm-42="" class="ms-toolbar" ng-reflect-ng-style="[object Object]">

I am using Angular version 2.3.1

Please suggest some better way to do this.

Possible duplicate of [Dynamically updating css in Angular 2](http://stackoverflow.com/questions/35882670/dynamically-updating-css-in-angular-2) — lin, Feb 26 '17 at 10:46
What I want so set object which has css properties from ts file as I described to refer as [ngStyle] — hitVPS, Feb 26 '17 at 10:51

score 1 · Accepted Answer · answered Feb 26 '17 at 11:02

1

What you have did is right just check your object code

You need to add # before color code

Use below code

export class AppbarComponent {
     StylingToolbar = {
    'background-color': '#00bcd4',
    'color':'white'
  };
}

answered Feb 26 '17 at 11:02

Mrunal Shidurkar

1 Answers1