How to display Toast in Ionic

Learn how to display toast message in ionic with step by step tutorial with example.

Download Source code:

    <ion-button (click)="showToast()">Click Me</ion-button>

Code Explanation:

  • When the user Click ion-button, we’re calling showToast()

import { ToastController } from '@ionic/angular';

    private toastCtrl: ToastController
) { }
async showToast() {
    await this.toastCtrl.create({
      message: "Hey! it's a toast",
      duration: 2000,
      position: 'middle',
      buttons: [{
        text: 'OK',
        handler: () => {
          console.log("ok clicked");
    }).then(res => res.present());

Code Explanation:

  • We have imported ToastController from @ionic/angular
  • We created `toastCtrl` Object from `ToastController` inside constructor.
  • We have created toast UI using this.toastCtrl.create() with few options such as duration, position, and buttons
  • When the toast is ready, we’re presenting using the `res.present()`