Check Battery Status and Charging State of Ionic 6 App

Last updated on: by Digamber

This is a comprehensive Ionic 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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// register module
import { BatteryStatus } from '@ionic-native/battery-status/ngx';

  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
  bootstrap: [AppComponent],
export class AppModule {}

Check Battery Status and Charging State in Ionic

Head over to the 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';
  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage {
  subscription : any;
    private batteryStatus: BatteryStatus
  ) { }

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

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:

# iOS
ionic cordova platform add ios
# Android
ionic cordova platform add android
# Windows
ionic cordova platform add windows

Use the following commands to build your Ionic app for various platforms:

# iOS
ionic cordova build ios
# Android
ionic cordova build android
# Windows
ionic cordova build windows

Start the app in the device.

# iOS
ionic cordova run ios -l
# Android
ionic cordova run android -l
# Windows
ionic cordova run windows -l


Ultimately, you have learned to handle the battery events in the Ionic 6 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.


I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.