How to use ToastController in Ionic 4?

Ionic Framework
1

I am trying to use a Toast Controller in my Ionic 4 app.

When the code tries to compile however, I am getting this error message:

Property ‘present’ does not exist on type ‘Promise’. Did yo
u forget to use ‘await’?

Here is my code:

login(): void {
    firebase.auth().signInWithEmailAndPassword(this.email, this.password)
      .then((user) => {
        this.toastCtrl.create({
          message: 'Welcome ' + user.user.displayName,
          duration: 3000
        }).present();
      }).catch((err) => {
        console.log(err);
      })
  }

After seeing this error, I did some research & came up with the following:

async presentAlert() {
    const alert = await this.toastCtrl.create({
      message: 'User Exists',
      duration: 3000      
    });
    await alert.present();
  }


  login(): void {
    firebase.auth().signInWithEmailAndPassword(this.email, this.password)
      .then((user) => {
        console.log('in here');
        this.presentAlert;
      }).catch((err) => {
        console.log(err);
      })
  }

Now, “in here” is printed to the console, but the toast is still not appearing.

Can someone please tell me what I’m doing wrong, & how can it be resolved. Thanks a lot!

2

Seems like you forget to call the method:

login(): void {
    firebase.auth().signInWithEmailAndPassword(this.email, this.password)
      .then((user) => {
        console.log('in here');
        this.presentAlert(); // here the BRACKETS()
      }).catch((err) => {
        console.log(err);
      })
  }
3

this.presentAlert is an expression resolving to a function. this.presentAlert() actually calls it.

Additionally, I would strongly recommend forgetting async and await exist for now.

4

Thanks a lot for this.

The toast is now displaying, but I’m getting a red line under async presentAlert().

This is the error appearing now in VS code when I hover over that line:

An async function or method must return a ‘Promise’. Make sure you have a declaration for ‘Promise’ or include ‘ES2015’ in your --lib option.

5 
async presentAlert() {
    const alert = await this.toastCtrl.create({
      message: 'User Exists',
      duration: 3000      
    });
    alert.present(); //update
  }

Do not use await in alert.present();.

6

Thanks for your response.

I’ve updated my code as follows, & the toast appears as expected:

login(): void {
    firebase.auth().signInWithEmailAndPassword(this.email, this.password)
      .then((user) => {
        this.toastLoginSuccess(user); 
      }).catch((err) => {
        this.toastLoginFail(err); 
      })
  }

  async toastLoginSuccess(user) {
    const alert = await this.toastCtrl.create({
      message: 'Welcome ' + user.user.displayName,
      duration: 3000
    });
    alert.present();
  }

  async toastLoginFail(err) {
    const alert = await this.toastCtrl.create({
      message: err.message,
      duration: 3000
    });
    alert.present();
  }

However, there is an error under async toastLoginSuccess(user) & async toastLoginFail(err). The error message displayed for both is:

An async function or method must return a ‘Promise’. Make sure you have a declaration for ‘Promise’ or include ‘ES2015’ in your --lib option.

7

I guess I’m shouting into the wind here, but I’ll try one more time: if you don’t completely understand what async and await do, don’t use them at all. They don’t allow you to do anything that can’t be done with more explicit syntax.

8

Hi,

If I remove await & async from my code & use something like this:

presentToast() {
    const toast = this.toastCtrl.create({
      message: 'Your settings have been saved.',
    });
    toast.present();
  }

I get an error on .present():

Property ‘present’ does not exist on type ‘Promise’.ts(2339)

It then recommends me to use await & async, how else would I go about doing this?

9 
this.toastCtrl.create({...})
  .then(toast => toast.present());
10

OK, that’s displaying the toast now.

But I’d want to dismiss this toast elsewhere, I’m not sure how I can reference this toast outside of this function

11

I did it on Ionic 5+ like so:

Return toast object like so:

async showToast(message: string, color: string, position: any = 'bottom',
    duration: number = 5000): Promise<HTMLIonToastElement> {

    const toast: HTMLIonToastElement = await this.toastController.create({
      message,
      duration,
      position,
      color,
      buttons: [
        {
          text: 'Ok',
          handler: () => {
          }
        }
      ]
    });

    toast.present();

    return toast;
  }