Check Battery Status In Ionic 5 application

Share the post

Hello All, In the last topic, We had discussed How to play YouTube Videos in the Ionic 5 application. Now, In this example, We will learn How to check battery status in the Ionic 5 application.

We all know that battery level status is an important factor while developing any mobile application. We have to check the performance of the mobile application and also need to save the user’s battery while he is using our application. So, that will affect the performance of the application. For that, We must have the knowledge about battery level status of the user. Hence, We are going to use the cordova-plugin-battery-status plugin in our example.

So, let’s start…

We will follow 5 steps to check battery status in ionic 5

  • Step 1: Create the new Ionic application
  • Step 2: Install the plugin & npm dependency
  • Step 3: Import the module
  • Step 4: Write the logic
  • Step 5: Run the application & see the output

Step 1: Create the new Ionic application

To see the battery status we will create a new ionic application using the following command

ionic start myApp blank

Now, open the newly created project inside Visual Studio Code using the following command

code .

It will open our project in Visual Studio Code.

Step 2: Install the plugin & npm dependency

Now, We will need to install the Cordova plugin using the following command

ionic cordova plugin add cordova-plugin-battery-status

Also, We need to install npm dependency

npm install @ionic-native/battery-status

Step 3: Import the module

Now, We will import the module in home.module.ts as shown below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage],
  providers: [BatteryStatus]
})
export class HomePageModule { }

Step 4: Write the logic

HTML

Now, Update home.page.html as shown below

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Battery Status Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button (click)=onBatteryStatus()>Check battery status</ion-button>
</ion-content>

Here, We are using a simple button & click event to get the battery status

TS

Now, We will write the click handler function in our typescript file as shown below

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 {

  checkBatteryStatus: any;

  constructor(private batteryStatus: BatteryStatus) {

  }

  onBatteryStatus() {
    this.checkBatteryStatus = this.batteryStatus.onChange().subscribe(status => {
      console.log("Battery Level: " + status.level + "Charger is plugged: " + status.isPlugged);
      alert("Battery Level: " + status.level + "Charger is plugged: " + status.isPlugged);
    });
  }

}

Step 5: Run the application & See the Output

Now, It’s time to run our application on a real android device. Please use the below command to run the application on android

ionic cordova run android

Output

battery status output
battery status output

Video Tutorial

Leave a Comment