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

In this post, we will discuss How to Add Ionic 4 Toast Component in Application in few easy steps. Ionic toasts are available with many options and event handlers which can be used without any plugin.

Toasts are basically messages which are used to show some sort of information to users like success or error messages. These are similar to Native toasts shown in Android or IOS applications.

 

Ionic Toast API provides a number of options like color, Auto Hide, animation, position on the screen etc.

Later we will also discuss on How to Add Custom CSS like color, background, border etc to Toast

Let’s check how to implement these in our default Home component.

We can simply start using Toast by importing ToastController available under @ionic/angular package.

Next, we need to include this in the constructor.

Import ToastController from @ionic/angular package then add in the constructor

To Show and Hide/ Dismiss Toast add following present() and dismiss() methods

That’s all you need to do to show a simple Toast in any component or service.

Options

Ionic Toast has many options available:

message: Text to show in a toast.
duration: Duration in milliseconds to enable Auto Hide.
showCloseButton: This will add a close button on Toast.
closeButtonText: Close button shown using the above option can have custom text.
color: Can change the color of toast using"primary""secondary""tertiary""success""warning""danger""light""medium", and "dark"
position: Toast can be positioned for three positions “top”, “bottom” and “middle”.
translucent: If set true this will make toast half transparent to enable ee through it

How to Customize Toast Style Using Custom CSS?

Now let’s play with Toast styling like Color, Background, Opacity, Border etc. Yes! we can change CSS properties of Toast or any Ionic components.
This toast is looking a bit weird 😛 but you can style in your own taste. To customize we will add a custom CSS class using options

In the above code, we have added “my-custom-class” after that we will move to file global.scss then add following style in it

You can find more style variables here

 

Leave a Reply

Your email address will not be published. Required fields are marked *