Error with showCloseButton when creating toast

Question

I'm working through the "Ionic 4 Firebase with Angular-Build PWA, Native Android, iOS" tutorial on Skillshare. One of the requirements is to create a toast that shows up when the user signs up on the app, with a close button.

I've followed the examples to the tee, but "showCloseButton: true" has a red error line bellow the whole statement.

This is my code:

async presentToast(message) {
    const toast = await this.toastController.create({
      message,
      duration: 1500,
      showCloseButton: true,
      position: this.platform.is('desktop') ? 'top' : 'bottom'
    });
    toast.present();
  }

And this is the error message I'm getting:

(property) showCloseButton: boolean Argument of type '{ message: any; duration: number; showCloseButton: boolean; position: "top" | "bottom"; }' is not assignable to parameter of type 'ToastOptions'.

Object literal may only specify known properties, and 'showCloseButton' does not exist in type 'ToastOptions'.ts(2345)

Any help will be greatly appreciated.

Answer 1

Ionic4 does not have a close button property for the Toast. But you can add a button with the 'cancel' role as explained in the documentation.

const toast = await this.toastController.create({
  header: 'Toast header',
  message: 'Click to Close',
  position: 'top',
  buttons: [
    {
      text: 'Done',
      role: 'cancel',
      handler: () => {
        console.log('Cancel clicked');
      }
    }
  ]
});
toast.present();