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

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Marcos Ribeiro Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Marcos Ribeiro
Guest

Your contents for ionic 4 is awesome!
I want to show in the bottom but not over content, i.e. over tabs menu because it’s bad for UX. We can achieve this with this toast?
Thanks!

Marcos Ribeiro
Guest

I solve this problem with this: on global.scss: .md .tabs-bottom { transform: translateY(-56px) !important; } .ios .tabs-bottom { transform: translateY(-50px) !important; } .md .header-top { top: 56px !important; } .ios .header-top { top: 44px !important; } on .ts: const toast = await this.toastController.create({ message: 'This is message', position: 'bottom', duration: 1000, color: 'warning', cssClass: 'tabs-bottom' // here the style from .scss }); toast.present();