Cordova Battery Status plugin in Ionic 2

Ionic Framework ionic-v3
1

Hello, I am new to Ionic framework. Can someone please explain me how to show the device battery status in a Ionic 2 application? I found the cordovaBatteryStatus plugin, but I don’t know how to use it. Thank you in advance!

2

So in V2, you can install the cordova plugin

Then you can reference the global object for the plugin

1 Like
3

Thank you for your quick reply. I have installed the plugin, but I don’t understand how to use it yet and I can’t find any examples in Ionic 2 for this.

In my home.html, I have this:
<button (click)="obtainBatteryStatus()" full>Show battery status</button>

In my home.js, I have this:

import {Page, Platform} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/home/home.html',
})
export class HomePage {
  constructor(platform) {
    this.platform = platform;
  }

  static get parameters(){
    return [[Platform]];
  }

  obtainBatteryStatus(){
    this.platform.ready().then(() => {
        alert('battery status: '+status.level);
    });
  }
}
4

I have figured out how to display the battery level in an alert message now. But I want to display this battery level value in my view.

my home.html

<ion-navbar *navbar>
  <ion-title>
    Battery status:  {{batteryStatus}}
  </ion-title>
</ion-navbar>

<ion-content class="home" padding>
  <button (click)="obtainNetworkConnection()" full>Get Network Connection</button>
</ion-content>

my home.js

import {Page, Platform} from 'ionic-angular';

window.addEventListener("batterystatus", onBatteryStatus, false);
function onBatteryStatus(info){
  alert('battery status: '+info.level+' isPlugged: '+info.isPlugged);
  batteryLevel = info.level;
}

@Page({
  templateUrl: 'build/pages/home/home.html',
})
export class HomePage {
  constructor(platform) {
    this.platform = platform;
  }

  static get parameters(){
    return [[Platform]];
  }

  obtainNetworkConnection() {
    this.platform.ready().then(() => {
        this.networkState = navigator.connection.type;

        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.CELL]     = 'Cell generic connection';
        states[Connection.NONE]     = 'No network connection';

        alert('Connection type: ' + states[this.networkState]);
    });
  }


}
5

Hi, I am too new for the ionic 2 framework, can you please help how to show the device battery status in a Ionic 2 application? and even i too have installed the plugin in my app, then i tried to use yours above codes in home.ts in my app but i got error in visual studio like :-

image
error.png576×518 34 KB

so please can you explain what are the procedure i need to do in my app to get the battery status …

what are the coding i need to use in my home.ts and home.html please check and update asap… Thank you in advance

6

Look at the ionic-native docs instead.