Check Battery Status and Charging State of Ionic 7 App

Last Updated on by in Ionic Tutorial

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:

sudo 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

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,

Install Cordova Battery Status Plugin

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

npm i cordova-plugin-battery-status --legacy-peer-deps
npm install @ionic-native/battery-status --legacy-peer-deps

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],
  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;
  constructor(private batteryStatus: BatteryStatus) {}
  // Check battery status
  onBatteryStatus() {
    this.subscription = this.batteryStatus
      .subscribe((status: any) => {
        alert('Level: ' + status.level + ' Is plugged: ' + status.isPlugged);
  // Unsubscribe subscription
  unsubscribeBatteryCheck() {

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 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.

❤️ Checkout Popular CSS Collection

Digamber - Author

Digamber, the founder of PositronX, is a certified web developer with over 10 years of experience. He possesses a curiosity for learning new things and enjoys playing cricket on his days off.