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


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';                

declarations: [
imports: [
bootstrap: [IonicApp],
entryComponents: [
providers: [
    {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

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() {


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 .


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 .

About the Author

Techiediaries is a website dedicated to bring you tutorials for the latest web technologies

comments powered by Disqus Protection Status