// Tutorial //

Implementing Toasts in Ionic 2 With ToastController

Published on November 15, 2016
    Default avatar
    By Alligator.io
    Developer and author at DigitalOcean.
    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.

    Want to learn more? Join the DigitalOcean Community!

    Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

    Sign up
    About the authors
    Default avatar
    Developer and author at DigitalOcean.

    Still looking for an answer?

    Was this helpful?
    Leave a comment