How to update a toast as part of an async function?

Ionic Framework
1

I am trying to display a toast to the user when they execute a function, & then update the message based on the response returned from a cloud function.

The docs below said to use an async function, but I don’t know how to update the message on that.

I copied the below toast from https://ionicframework.com/docs/api/toast:

async presentToast() {
    const toast = await this.toastCtrl.create({
      message: 'Please wait, your details are being updated....',
    });
    toast.present();
  }

This toast is being displayed when I execute the below function:

updateDetailslike(info) {
    this.presentToast();
    this.http.post('myUrl', body, {}).then((response) => {
        // IF THE RESPONSE IS OK, UPDATE THE TOAST SAYING UPDATE WAS SUCCESSFUL
    }, (err) => {
        // IF THE RESPONSE IS NOT OK, UPDATE THE TOAST SAYING UPDATE WAS UNSUCCESSFUL
    });
  }

Can someone please tell me how this can be done?

2

Perhaps useful?


export class HomePage {
  toast?: HTMLIonToastElement;

  constructor(private toaster: ToastController) {
  }

  pop(): void {
    this.toaster.create().then(toast => {
      this.toast = toast;
      toast.present();
    });
  }

  dismiss(): void {
    if (this.toast) {
      this.toast.dismiss().then(() => delete this.toast);
    }
  }

  alterMessage(msg: string): void {
    if (this.toast) {
      this.toast.message = msg;
    }
  }
}

<ion-content>
    <ion-button (click)="pop()" [disabled]="!!toast">pop</ion-button>
    <ion-button (click)="alterMessage('sined')" [disabled]="!toast">sine</ion-button>
    <ion-button (click)="alterMessage('seeled')" [disabled]="!toast">seel</ion-button>
    <ion-button (click)="alterMessage('delivered')" [disabled]="!toast">deliver</ion-button>
    <ion-button (click)="dismiss()" [disabled]="!toast">dismiss</ion-button>
</ion-content>
2 Likes
3

This clears it up a lot, thanks a mill, much appreciated!