@ionic-native/battery-status works very intermittently


#1

I’m developing a very simple toy app to learn the BatteryStatus plugin. For testing, I’m using the Android emulator, as well as the Ionic DevApp (on my Android phone).

All the app does is display the current battery status (the current charge level, and whether or not the device is plugged in). However, the plugin is behaving very inconsistently. Sometimes, my app displays the expected data at startup, but fails to update in response to changes (e.g., adjusting the battery level of the emulated device, or unplugging my physical phone). Most of the time, it displays nothing at all.

Here’s what I’ve done:

  • ionic start testapp blank
  • ionic cordova plugin add cordova-plugin-battery-status
    npm install --save @ionic-native/battery-status
  • Imported BatteryStatus in app.module.ts, and added it to the providers array
  • Updated home.ts as shown below
  • Run the app in the Android emulator (ionic cordova emulate android) and the DevApp (ionic serve).

Here is my home.ts:

import { Component, OnInit } from '@angular/core';

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

@Component({
    selector: 'page-home',
    template: `
        <p>level: {{ batteryStatus_level }}%<br>
        isPlugged: {{ batteryStatus_isPlugged | json }}</p>
        `
})
export class HomePage implements OnInit {

    private batteryStatus_level: number;
    private batteryStatus_isPlugged: boolean;

    constructor(
        private batteryStatus: BatteryStatus
    ) {}

    ngOnInit(): void {

        this.batteryStatus.onChange().subscribe((response: BatteryStatusResponse) => {
            this.batteryStatus_level = response.level;
            this.batteryStatus_isPlugged = response.isPlugged;
        });

    }

}

Any ideas? As far as I can tell, this should work. But I’m having similar problems with other @ionic-native plugins, so perhaps I’m doing something wrong. (I’m new to working with native stuff in Ionic.)

Is ngOnInit() the correct place to subscribe?

Should I expect this plugin to work properly in the Android emulator and the DevApp? (I would think so, but perhaps I’m making an unwarranted assumption.)

Any guidance would be appreciated!


#2

Your updates are not checked by Angular change detection. Maybe the variables are updating and the html is not re-rendering? Try console.log inside the subscribe, see what that produces. At least you’ll isolate the problem to either the subscription or the rendering.


#3

D’oh! Of course. That was my problem.

I had to inject ChangeDetectorRef from @angular/core, and manually call its .detectChanges() method after updating my variables.

Thank you! I should be able to make a lot more progress with my larger project now…