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