Battary status plugin not wokring in ionic 4

Ionic Framework ionic-v3
1

Hi,

I am trying to get battary percentage of the device and i am using the below plugin.

ionic cordova plugin add cordova-plugin-battery-status
npm install @ionic-native/battery-status

but looks like the plugin is not working.
Below is code to get the battary status

const subscription = this.batteryStatus.onChange().subscribe(status => {
console.log(status.level, status.isPlugged);
});

And the error i am getting is

core.js:15724 ERROR TypeError: Invalid event target
at setupSubscription (fromEvent.js:50)
at Observable._subscribe

Anybody know why it is not working.
Thanks in advance.

2

Hi Lohith95 don’t worry I am here to help you

Step 1) Create an Ionic 4 Application using CLI

Step 2) Install Cordova and Ionic Native Plugins

JavaScript
ionic cordova plugin add cordova-plugin-battery-status npm install --save @ionic-native/battery-status@beta

ionic cordova plugin add cordova-plugin-battery-status npm install --save @ionic-native/battery-status@beta

Step 3) Import Plugins in App Module FILE_URI

In app.module.ts, import plugins and add in providers array
JavaScript
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 {}
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

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();
}
}

cheers!!