Styling with variables?


I’ve been meaning to style a page with specific colors depending on a variable’s value.

For reference, I got a variable in home.ts:

public homeColor : String;

constructor(public navCtrl: NavController, public navParams: NavParams) {
  	this.homeColor =;

Then, on home.html:

<ion-content padding>
	<div [ngStyle]="{ backgroundColor : black }>Hello! This should be have a colored background</div>

The point is that, the HOME page is called with a parameter, which is the color in question. It is then passed to a variable, which is meant to be used for the div’s background color. [ngColor] is what I’ve been trying to use to style the div (even to simple black, as of now), but it doesn’t work! So far I tried that and [style] but no dice…

Any thoughts? Thank you in advance!



<div [ngStyle]="{ 'background-color' : homeColor}>Hello! This should be have a colored background</div>

Take a look where and when ‘’ are used.Also - is used not UpperCase.

Best regards, anna-liebt

Thank you very much Anna!