Data binding to change div background color not working

ionic ionic-v3
#1

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?

Thanks!

#2

How are you binding it in your template?

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

#4

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>
  </div>
<ion-content>
1 Like
#5

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
#6

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.

#7

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

:grinning:

Rgdz
Tom

#8

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

[style]="_bar1color"

and

this._bar1color="background-color:green";

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