Display Toast Message using Ionic 5

SUNDARAVEL    SUBSCRIBE

I teach how to build apps using ionic and flutter

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 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 toast is ready, we're presenting using the res.present()