Ionic 4 How to Check Battery Percentage Using Cordova and Ionic 4.X Native Plugin

Leave a Comment / By Jolly.exe / Updated On June 4, 2022

In Ionic Application, we can check battery Status of the mobile device using Cordova and Ionic Native plugins. By using these plugin we can call methods to get battery percentage and we can also check if the device is plugged to a power source.

We can have many states to show user or check some tasks according to the current battery status of the device.

Let’s start… we will cover these two things:

How to Check Battery Status in Ionic 4.X Applications?

How to Check if Device is Plugged in Power Source or in Charging State?

Step 1) Create an Ionic 4 Application using CLI

Make sure you have the latest version of Ionic CLI installed.

$ npm install -g ionic cordova

Create a new application by running following command in CMD

$ ionic start Ionic3CheckBattery blank --type=angular
$ cd Ionic3CheckBattery

Step 2) Install Cordova and Ionic Native Plugins

$ ionic cordova plugin add cordova-plugin-battery-status
$ npm install --save @ionic-native/[email protected]

Step 3) Import Plugins in App Module FILE_URI

In app.module.ts, import plugins and add in providers array

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

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

Step 4) Call Method in Home Component

Now we will import plugin in home.page.ts file and call method to get battery status and a boolean state to check if the device is plugged in power source.

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 {

  batterySubscription : any;

  constructor(
    private batteryStatus: BatteryStatus
  ) {

  }

  
  checkBattery(){
    // watch change in battery status
    this.batterySubscription = this.batteryStatus.onChange().subscribe(status => {
      console.log(status.level, status.isPlugged);
    });
  }

  stopBatteryCheck(){
    this.batterySubscription.unsubscribe();
  }

}

There are three methods provided by the plugin

onChange: Watch the change in battery level
onLow: Watch when the battery level goes low
onCritical: Watch when the battery level goes to critical

These methods can be subscribed and unsubscribed as per application requirements