CODEWITHSUNDEEP
androidionic2
Anivaishu
Anivaishu

Reputation: 263

Transparent status bar ionic2

I need transparent status bar ionic 2.

I installed npm install --save @ionic-native/status-bar.and also

refer this link https://ionicframework.com/docs/v2/native/status-bar/

I used this.statusBar.backgroundColorByHexString("#0e5591"); But It's not working.

Below my app component.

import { Component, ViewChild,Inject } from '@angular/core';
import { Nav,NavController,Platform ,AlertController,MenuController,App,IonicApp} from 'ionic-angular';
import { Splashscreen ,Network,Toast} from 'ionic-native';
import { StatusBar } from '@ionic-native/status-bar';


@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  public app: App;
  currentuser;
  @ViewChild(Nav) nav1: Nav;
  auth:any;
  menu;
  nav:NavController;


  constructor(private statusBar: StatusBar,public appCtrl: App,public menu1: MenuController,public alertCtrl:AlertController,public platform: Platform,public authservice:Authservice) {

    this.auth=localStorage.getItem("email");
    console.log("Auth"+this.auth);
    // this.rootPage = this.isUserLoggedIn ? LoginPage : MycomplaintsPage;
    // console.log(this.rootPage);
    if(this.auth != undefined && this.auth != null)
    {
      this.rootPage = DashboardPage;
    }
    this.showRoot = true;



    this.initializeApp();


  }

  initializeApp() {

    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.statusBar.backgroundColorByHexString("#0e5591");
      Splashscreen.hide();



      if(Network.type === Connection.NONE)
      {
      console.log("success");
      let alert = this.alertCtrl.create({
      title: "Internet Connection",
      subTitle:"Please Check Your Network connection",
      buttons: [
      {
      text: 'Ok',
      handler: () => {
      this.platform.exitApp();
      }
      }
      ]
      });
      alert.present();
     }
    });

  }

  exit(){
      let alert = this.alertCtrl.create({
        title: 'Confirm',
        message: 'Do you want to exit?',
        buttons: [{
          text: "exit?",
          handler: () => { this.exitApp() }
        }, {
          text: "Cancel",
          role: 'cancel'
        }]
      })
      alert.present();
  }
  exitApp(){
    this.platform.exitApp();
  }


}

I am getting this err 

ORIGINAL EXCEPTION: No provider for StatusBar!

Kindly advice me,

Thanks

Upvotes: 0

Views: 1526

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29625

It looks like you have two versions of ionic native from your imports.

import { Splashscreen ,Network,Toast} from 'ionic-native';
import { StatusBar } from '@ionic-native/status-bar';

Make sure you only have @ionic-native/core in your package.json. Also according to the latest ionic-native docs, you need to set the plugin as provider in ngModule:

@NgModule({
  ...

  providers: [
    ...
    Statusbar
    ...
  ]
  ...
})

Upvotes: 2

Related Questions