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';

  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() {

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]

Pretend async and await don’t exist. They obscure what is actually happening.

That’s great. That displays a property on your controller called batteryLevel. Now you just have to put the right thing into it. First off, always give it a sane value at declaration:

class HomePage {
  batteryLevel = "calculating...";

Now, fill it once Capacitor reports back:

ngOnInit(): void {
  Device.getBatteryInfo().then(batinfo => {
    this.batteryLevel = `${batinfo.batteryLevel * 100}%`;

Angular change detection will do the rest.

That works great, thank you for your help!