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]