ionic
  1. ionic-toast
PreviousNext

Ionic Toast

Ionic Toast is a built-in component that provides a simple way to show temporary messages on the screen. It is a pop-up message that appears at the bottom of the screen and can be used to display any kind of information, such as success or error messages.

Syntax

The syntax for using Ionic Toast is as follows:

import { ToastController } from '@ionic/angular';
 
constructor(public toastController: ToastController) {}
 
async presentToast() {
  const toast = await this.toastController.create({
    message: 'Your message here',
    duration: 2000
  });
  toast.present();
}

Example

Here is an example of using Ionic Toast in an Ionic application:

<ion-button (click)="presentToast()">Show Toast</ion-button>

Output

The output of the above example will be a pop-up message displayed at the bottom of the screen for a duration of 2 seconds.

Explanation

The Ionic Toast component is created using the ToastController provided by Ionic. The create() method is called to create a new toast, which takes in an object with various options such as the message to be displayed and the duration for which the toast should be shown.

The present() method is called on the newly created toast to make it appear on the screen. The async/await syntax is used to wait for the toast to be created before presenting it to avoid any unexpected behavior.

Use

Ionic Toast can be used in various scenarios, such as:

  • Displaying successful or error messages after form submission or API calls.
  • Informing users about important information, warnings, or alerts.
  • Giving feedback for user actions or as confirmation for a completed task.

Important Points

  • Ionic Toast is a simple and easy-to-use component that can be used to display temporary messages on the screen.
  • The message and duration can be customized easily.
  • Multiple toasts can be displayed on the screen at the same time.

Summary

Ionic Toast is a built-in component that provides an easy and efficient way to display temporary messages on the screen. It can be used to give feedback for user actions or to display important information, and it is highly customizable. Ionic Toast is a useful tool for any Ionic developer looking to give their users an improved experience through short and sweet notifications.

TabsToolbar
Published on: