Outputting Battery Level with Capacitor Device Plugin

Hello all, I am new to Ionic/Angular and I was hoping for some help.

I want to output the device battery level on the screen using the Capacitor Device plugin but I can’t work out how. I have managed to log it in the console correctly but don’t know what I need to do display it on the front end.

My code on home.page.ts is:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  constructor() { }

  batteryInfo = async () => {
    const batteryInfo = await Device.getBatteryInfo();
    const batteryLevel = batteryInfo.batteryLevel;
    console.log('Battery level: ', batteryLevel*100, '%');
    return batteryLevel;
  }

  ngOnInit() {
    this.batteryInfo();
  }
}

But how do I now display that in my <ion-label>{{ ? }}</ion-label> on the front end?

I did try <ion-label>{{ batteryLevel }}</ion-label> but it just outputs

[object Promise]

1 post - 1 participant

Read full topic