Ionic 2+ - Check Device Battery Status with Cordova and Ionic Native 3.x+

Introduction


In this tutorial we'll be covering how to check device battery status in Ionic 2+ apps using Cordova and Ionic Native 3.x+ .

We'll see how to check the level of power and if the device is pluged to a power source .

Getting started


As always lets start by creating a new Ionic application ,based on the blank,using the Ionic CLI v3+

Open your terminal or command propmt then run :

ionic start IonicBatteryStatus blank 

Navigate inside your app root folder :

cd IonicBatteryStatus 

Install both The Cordova plugin cordova-plugin-battery-status and its Ionic Native 3.x+ wrapper

ionic plugin add --save cordova-plugin-battery-status
npm install --save @ionic-native/battery-status

Open src/app/app.module.ts and add BatteryStatus to module providers .

import { BatteryStatus } from '@ionic-native/battery-status';                

@NgModule({
declarations: [
    MyApp,
    HomePage 
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    BatteryStatus,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}  

Now we are ready to inject BatteryStatus and use it to check the battery status such as the level of power and if the device is plugged to an power source .

So go ahead and open src/pages/home/home.ts

Import BatteryStatus and BatteryStatusResponse

import { BatteryStatus ,BatteryStatusResponse } from '@ionic-native/battery-status';

Inject BatteryStatus then subscribe to changes to Battery Status

@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class BatteryStatusPage {

subscription : any;
constructor(public navCtrl: NavController, public navParams: NavParams,private batteryStatus: BatteryStatus) {
}

ionViewDidLoad() {
    console.log('ionViewDidLoad BatteryStatus');
    // watch change in battery status
    this.subscription = this.batteryStatus.onChange().subscribe(
    (status: BatteryStatusResponse) => {
    console.log(status.level, status.isPlugged);
    }
    );

    // stop watch

}
ionViewWillLeave() {
    this.subscription.unsubscribe();
}

} 

So using ionViewDidLoad life cycle event we suscribed to this.batteryStatus.onChange() event, when the page loads, so we can get continuos battery status while it is changing .

And when the page leaves (ionViewWillLeave) we unsubscribe .

We just print to the console the status.level which holds the level of power remaining on the device battery . And status.isPlugged which can be either true or false depending on if the device is plugged to a source of power .

Conclusion


Battery status is such important information about a mobile device .Being able to retrieve the level of power , and if the device is plugged to a power source or not ,is an important thing that may be of good help when developing battery consuming apps .

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status