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:

  1. Create
  2. 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

Home.page.ts

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

Ionic Toast

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:

Ionic Toast2

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

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

Ionic Toast3

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:

Ionic Toast4

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

 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:

Ionic Toast5

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.

Pin It on Pinterest

Share This