Ionic 3 Toast Not Hiding Issue using Toast Controller Workaround!

Ionic 3 provides Toast Controller using which we can have close enough toasts like native applications. Toasts prove very helpful in making user interfaces more friendly, we can alert users for small information like data processing, please wait, It’s Done! like messages.

Toast Controller

Implementing Ionic Toast is very easy, it provides many options like duration of seconds after which toast fades out automatically, We can position of toast to show ie “top”, “bottom” or “middle”.

Also Read: Ionic 4 | Show Native like Toast Messages in Ionic Application in 2 Steps Without Any Plugin

Implimentation

In component, you want to show toasts, import

import { ToastController } from 'ionic-angular';

Then in the constructor, inject toast provider

constructor(private toastCtrl: ToastController) {}

Now you just need to call a create method

this.toastCtrl.create({
    message: 'Your Toast is Ready!',
    duration: 3000,
    position: 'top'
  }).present();

Options

position can be top, bottom or middle

Callback function fired when a toast is dismissed!

  let toast = this.toastCtrl.create({
    message: 'Your Toast is Ready!',
    duration: 3000,
    position: 'top'
  });

  toast.onDidDismiss(() => {
    console.log('Dismissed toast');
  });

  toast.present();

Know Issue

Sometimes toast simply does not hide, for a workaround I created a common method to show toast than in seTimeout, there is a dismiss call. See this code below

  showToast(msg: string,pos: string, time) {
    const toast = this.toastCtrl.create({
      message: msg,
      duration: time,
      position: pos
    });
    toast.present();
  
    setTimeout(() => {
      toast.dismiss();
    }, time + 500);
  }

You can call this method from a service or component itself.

this.configService.showToast("Your Toast is Ready!","bottom",3000);

We may need this workaround for some time, as this can be resolved in future releases.