Data binding to change div background color not working

New ionic developer here, just trying to programatically change the background color of a div using data binding:

export class ActivatePage {

public _bar1Color: string;

constructor(public navCtrl: NavController) {

this._bar1Color = "green";


Any ideas where I’m going wrong?


How are you binding it in your template?

I.e. are you able to show us your template?

Argggh, realized the editor was hiding my markup…

<ion-content padding>
  <div class="signal-strength">
    <div class="bar-1" [style.background]="bar1Color"></div>
    <div class="bar-2"></div>
    <div class="bar-3"></div>
    <div class="bar-4"></div>
1 Like

Ah, well the variable you have defined in your controller is _bar1Color but your template is expecting bar1Color.

So you’ll need to make them match. I’d suggest the latter styling, as normally variables that start with an underscore are meant to convey that they’re private/internal use only.

1 Like

If you can find my post earlier… You’ll see that this will not work in Safari. You will need to set the class and not the style. Style is read only you’ll need to use [(ngClass)]=“bar1color” or something along those lines.

Two way binding to set class?
Where is that post, so I can comment



search for iOS Safari Style Tag . However it does work in Chrome/Android if you use




But considering it doesn’t work in iOS this way … I would just add SCSS and use classes.