Ionic Toast

Ionic Toast

The ionic toast is a type of notification that appears on the top of application content. It is commonly used in modern applications. Ionic toast can be used to provide feedback about an action or to show a system message. Usually, Ionic toast is shown for a short duration of time, then automatically dismiss.

Toast Controller

The Ionic toast controller is a component that is used to create the toast component. It uses the two methods to create the toast notification. These methods are below:

Create
Dismiss

Create

The create method is used to create a toast overlay. All of the toast options must be passed inside the create method. The message property is used to show the message. If you want to show a close button on the toast, then you set the showCloseButton option value to true.

Example: It uses the toast controller create() method to display the toast notification. For displaying the toast notification, the <ion-button> component calls the openToast() function in this file. The openToast() function provides the message and duration properties where message property displays the toast notification, and duration property dismisses the notification after a specific time.

Home.page.html

<ion-header>  
   <ion-toolbar color="primary">  
     <ion-title>Ionic Toast Example</ion-title>  
   </ion-toolbar>  
 </ion-header>
 <ion-content class="ion-padding" color="light">  
   <h1>Show Toast Notification</h1>   
   <ion-button (click)="openToast()" expand="round" color="success">Toast Show</ion-button>  
 </ion-content>

Home.page.ts

import { Component } from '@angular/core';  
 import { ToastController } from '@ionic/angular';  
 @Component({  
   selector: 'app-home',  
   templateUrl: 'home.page.html',  
   styleUrls: ['home.page.scss'],  
 })   
 export class HomePage {  
   constructor(public toastCtrl: ToastController) { }  
   async openToast() {  
     const toast = await this.toastCtrl.create({  
       message: 'This is a Notification Example',   
       duration: 4000  
     });  
     toast.present();  
   }  
 }

Output: After executing this code, you will get the output, as shown below:

When you click on the Toast Show button, then it shows the toast notification. After completion of the specified time, then it will automatically dismiss the toast message, as shown below:

Dismiss

The ionic toast notification can be dismissed automatically after a limited amount of time by passing the number of milliseconds to show it in the time duration of the toast option. If you set the showCloseButton to true, then the toast notification will dismiss by the close button. By calling the dismiss() method, you can dismiss the toast notification after creation.

Example: This example explains how you can use the dismiss() method in the ionic toast. The dismiss() method hide the toast message when you click on the close button.

Home.page.ts

import { Component } from '@angular/core';  
 import { ToastController } from '@ionic/angular';  
 @Component({  
   selector: 'app-home',  
   templateUrl: 'home.page.html',  
   styleUrls: ['home.page.scss'],   
 })  
 export class HomePage {  
   constructor(public toastCtrl: ToastController) { }  
   async openToast() {  
     const toast = await this.toastCtrl.create({  
       message: 'This is a Toast Notification Example',   
       showCloseButton: true,  
       closeButtonText: 'Close',  
     });  
     toast.present();  
     toast.onDidDismiss().then((val) => {  
       console.log('Toast Dismissed');   
     });  
   }  
 }

Output: After executing this code, you will get the output, as shown below:

When you click on the Toast Show button, then it shows the toast notification. If you click on the close button then it hides the toast message, and it is shown on the console that notification is dismissed or enabled, as shown below:

Positioning

The ionic toast can be positioned at the top, bottom, and middle of the viewport. The position attribute can be passed to the Toast.create(opts) method. The position values of the toast are top, bottom, and middle in the app. If the position of toast is not specified, then the toast will be displayed at the bottom of the screen.

Example: This example explains how you can use the position property in the ionic toast. Here, we have set the position of the toast notification in the middle of the content area.

Home.page.ts

import { Component } from '@angular/core';  
 import { ToastController } from '@ionic/angular';  
 @Component({  
   selector: 'app-home',  
   templateUrl: 'home.page.html',   
   styleUrls: ['home.page.scss'],  
 })  
 export class HomePage {  
   constructor(public toastCtrl: ToastController) { }  
   async openToast() {   
     const toast = await this.toastCtrl.create({  
       message: 'This is a Toast Notification Example',  
       animated: false,  
       showCloseButton: true,  
       closeButtonText: 'close',   
       position: 'middle',  
     });  
     toast.present();  
     toast.onDidDismiss().then((val) => {  
       console.log('Toast Dismissed');   
     });  
   }  
 }

Output: After executing this code, you will get the output. When you click on the Toast Show button, then it shows the toast notification in the middle of the content area. If you click on the close button then it hides the toast message, as shown below:

The following properties are supported by the toast controller, which is given below in the table:

Name	Type	Description
message	string	It is used to display the message.
duration	number	It is used to set the number of milliseconds before the toast is dismissed.
position	string	It is used to set the position of toast at the viewport. Possible values are top, bottom, and middle.
cssClass	string	It is used for the additional classes for custom styles.
showCloseButton	boolean	Whether or not to display a button to dismiss the toast.
closeButtonText	string	text to display in the dismiss button.
dismissOnPageChange	boolean	Whether or not to dismiss the toast, when switching to a different page.

← Prev Next →