Tutorial

Implementing Toasts in Ionic 2 With ToastController

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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.

0 Comments

Creative Commons License