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


In component, you want to show toasts, import

Then in the constructor, inject toast provider


Now you just need to call a create method


position can be top, bottom or middle

Callback function fired when a toast is dismissed!

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

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

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

Leave a Reply

Notify of