Ionic 5 Check Battery Status and Charging State with Ionic Native and Cordova Plugins

Last updated on by Digamber

This is a comprehensive Ionic 5 and Angular tutorial on how to check the battery percentage of the mobile device with the help of Ionic Native and Cordova plugins.

Not just that, after reading this article, you will also be able to make sure your device is connected to the power source. All this will be done by calling the methods with Ionic Native and Cordova plugins.

Additionally, there are numerous devices states that we can display to users; however, we are going to focus on mobile device battery status specifically and ensure the mobile device is connected and being charged correctly.

Create Ionic Application

Firstly, install the latest Ionic CLI using the following command:

npm install -g @ionic/cli

Now, create the brand new Ionic application on your system.

ionic start ionic-battery-charging-state-example blank --type=angular

Move into the project root:

cd ionic-battery-charging-state-example=angular

Install Cordova Battery Status Plugin

Install Cordova-plugin-battery-status and Ionic Native battery status plugins; these plugins support almost all major platforms.

ionic cordova plugin add cordova-plugin-battery-status

npm install @ionic-native/battery-status

Import and Register BatteryStatus in AppModule

Head over to the main app.module.ts file and import and register the BatteryStatus plugin.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';


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


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    BatteryStatus
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

Check Battery Status and Charging State in Ionic

Head over to the home.page.ts file and import the BatteryStatus library. The battery status package lets us access the three robust and profound methods onChange, allow, and onCritical to keep an eye on mobile device battery status.

import { Component } from '@angular/core';
import { BatteryStatus } from '@ionic-native/battery-status/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  subscription : any;

  constructor(
    private batteryStatus: BatteryStatus
  ) { }


  // Check battery status
  onBatteryStatus(){
    this.subscription = this.batteryStatus.onChange().subscribe(status => {
      alert("Level: " + status.level + " Is plugged: " + status.isPlugged);
    });
  }

  // Unsubscribe subscription
  unsubscribeBatteryCheck(){
    this.subscription.unsubscribe();
  }

}

Events in the demo code return an object with the given below props:

  • level: Show battery charging percentage from 0 to 100 in numerical values.
  • isPlugged: Displays whether the device is connected to charges in the boolean form.

Test Application

For the demo purpose, you can test your progress on iOS and Android devices.

First add the devices:

ionic cordova platform add ios
ionic cordova platform add android

Run the project based on your devices prefrence:

# Android
ionic cordova run android

# iOS
ionic cordova run ios

Conclusion

Ultimately, you have learned to handle the battery events in the Ionic 5 application using the Cordova and Ionic Native plugins battery status plugin. I hope you liked this tutorial and share it with others for reading the documentation click here.