Implementing Toasts in Ionic 2 With ToastController

Toasts are short messages that appear usually near the bottom of the screen for a brief moment. They are mostly used for quick notifications in mobile apps. Ionic 2 makes it easy to implement toasts in your apps:

import { ToastController } from 'ionic-angular';

Then you inject ToastController in your component’s class constructor:

constructor(public toastCtrl: ToastController) {}

And now let’s create a 2-second toast in a favoriteRecipe() method that indicates to the user that the recipe was added to their favorites:

favoriteRecipe() {
  this.favorite = true;
  let toast = this.toastCtrl.create({
    message: `Added to your favorites!`,
    duration: 2000
  });
  toast.present();
}

The present() method on the toast will display it. dismiss() can also be called on toasts to close them.

Toast Controller options

On top of message and duration, here are a few more options that you can set on toasts:

• position: A string indicating the placement for the toast, can be top, middle or bottom. Bottom is the default.
• cssClass: A string with classes to apply to the toast.
• closeButtonText: Defaults to ‘Close’.
• dismissOnPageChange: Defaults to false.
• showCloseButton: Defaults to false.