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

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.
  Tweet It

🕵 Search Results

🔎 Searching...