Ionic 2 - Dynamically Change Status Bar Color
I am trying to change on a page the ionic color of the status bar depending on the parameter it receives.
Only the variable colorStatusBar
inside the function is onDeviceReady()
rendered as undefined
.
Can anyone help me with this problem?
typeColor: string;
colorStatusBar: string;
constructor(public navCtrl: NavController, public navParams: NavParams, statusBar: StatusBar){
this.typeColor = this.navParams.get('type');
if(this.typeColor == "value1"){
this.colorStatusBar = "#F44336";
}
if(this.typeColor == "value2"){
this.colorStatusBar = "#66BB6A";
}
if(this.typeColor == "value3"){
this.colorStatusBar = "#9E9E9E";
}
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(this.colorStatusBar) // undefined
statusBar.backgroundColorByHexString(this.colorStatusBar);
}
}
source to share
I could only get it to work like this:
import { Component } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
...
typeColor: string;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public statusBar: StatusBar,
public platform: Platform){
this.typeColor = this.navParams.get('type');
this.platform.ready().then(() => {
if(this.typeColor == "value1"){
statusBar.backgroundColorByHexString("#F44336");
}
if(this.typeColor == "value2"){
statusBar.backgroundColorByHexString("#66BB6A");
}
if(this.typeColor == "value3"){
statusBar.backgroundColorByHexString("#9E9E9E");
}
})
}
...
source to share
You can do this by moving the logic inside ionViewDidLoad()
(runs after the constructor) and using platform.ready()
to ensure Cordova is loaded:
ionViewDidLoad() {
this.typeColor = this.navParams.get('type');
this.platform.ready().then(() => {
if(this.typeColor == "value1"){
this.statusBar.backgroundColorByHexString("#F44336");
}
if(this.typeColor == "value2"){
this.statusBar.backgroundColorByHexString("#66BB6A");
}
if(this.typeColor == "value3"){
this.statusBar.backgroundColorByHexString(#9E9E9E");
}
}
}
In this case, your constructor will change to this:
constructor(public navCtrl: NavController, public navParams: NavParams, public statusBar: StatusBar, public platform: Platfom){
// empty :), but notice the dependency injection of Platform
}
Don't forget to import Platform
at the top:
import { Platform } from 'ionic-angular';
For your specific example to work, you need to make sure that you are calling this current page from the parent page and also passing in param type
!
So, on the parent page (you didn't share the code for this), you need to have something like this:
export class ParentPage {
constructor(public navCtrl: NavController) {
}
pushPage(){
// push another page onto the navigation stack
// causing the nav controller to transition to the new page
// optional data can also be passed to the pushed page.
this.navCtrl.push(MyStackOverflowSharedPage, {
type: "value2"
});
}
}
Read more about this in the documentation for NavController
.
source to share