Table of Contents

URL: https://www.progressiverobot.com/ionic-toast-controller-ionic/

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

toasts illustration for: 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.