Ionic 6 Check Battery Percentage and Charging State Tutorial

In this step-by-step guide, you will create a small feature that will answer how to check battery status and check battery charging state in Ionic Angular application using Ionic native and Cordova battery-status plugin.

The battery status plugin is useful in checking the device Battery’s nitty-gritty; for instance, you can find out battery status, battery critical state, or even whether the battery is low or not.

This plugin supports all the major platforms such as iOS, Android, Windows, or even the browsers such as Chrome, Firefox, and Opera.

Specially, we would like to mention one more advantage of the battery status plugin is you can ascertain your device is connected to the power source.

Install Ionic App

Open console, type command on the terminal and execute command to commence the installation of Ionic CLI tool:

npm install -g @ionic/cli

Next, head over to console and execute command to install blank Ionic Angular app.

ionic start ionic-demo blank --type=angular

Get inside the application folder:

cd ionic-demo=angular

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Install Battery Status Plugin

In the foundational step, you have to type both the commands on the terminal and run the command to install the battery status plugin.

ionic cordova plugin add cordova-plugin-battery-status

npm install @ionic-native/battery-status

Add BatteryStatus Module in Main Module

To use the battery status package, you need to import the BatteryStatus module from the ‘@ionic-native/battery-status/ngx’ package, additionally inject it into the providers’ array into the main AppModule class.

Open app.module.ts file and insert the given code:

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


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


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

export class AppModule {}

Ascertain Battery Status in Ionic

In this we will show you how to implement battery status feature in Ionic and show you how to display battery percentage. Firstly, import the BatteryStatus package on top and inject it into the constructor method.

Access the battery status onChange event, subscribe to it, get the status response and display battery level and find out whether it is connected or not.

Update home.page.ts file:

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


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

  // Unsubscribe
  removeBatteryCheck(){
    this.batterySubscription.unsubscribe();
  }

}

The battery status’ on change event returns the response with level and isPlugged properties. The level property displays battery percentage, which ranges from o to 100, whereas the isPlugged property shows whether the mobile device is plugged to the charger.

Test Application

Lastly, you may test the app using the following instructions:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

# Windows
ionic cordova platform add windows

Next, use command to create the build:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

# Windows
ionic cordova build windows

Finally, use command to start the app:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

# Windows
ionic cordova run windows -l

Conclusion

We have eventually completed the Ionic Angular battery status tutorial.

In this example, we have seen how to build a tiny feature to check the battery percentage and also how to check if the device is plugged to the power source and being charged or not.