How to display Toast in Ionic

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

Download Source code:

home.page.html

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

Code Explanation:

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

home.page.ts


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

constructor(
    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()`