Ionic comes with a number of components, including modals, popups, and cards. Ionic ToastController can be used to display information for the short period of time by using ToastController. The toast is commonly used to provide feedback, error/ other messages about a particular task’s status or to simply display a shortcan be displayed either on the top of the screen, middle and on the bottom area.
The Ionic makes it easy to implement toast on your app’s. follow the below steps to implement toast in your ionic app.
Step 1: Create a project to implement ToastController
Step 2: Import the ToastController and add ToastController code in Typescript
We have to import ToastController from ionic-angular and the instance of ToastController have to be into ou constructor as the property. In this example, we are using ToastController to display message on
- Display Toast message when the mouse cursor comes over image
- Display ToastController message over different position – ionic ToastController example code from ionic documentation.
- Display different ToastController message when all form fields are filled or not filled.
Add the following code in home.ts file
When creating a new toast notification using the method create(), we can pass an object to configure the toast notification. The following configuration properties are supported by ToastController.
- message – Message to display.
- duration – Number of milliseconds before the toast is dismissed.
- position – Position to show the toast; possible values are top, middle and bottom.
- showCloseButton – Whether to show a button to close the toast.
- closeButtonText – Text of the close button.
- dismissOnPageChange – Whether to dismiss the toast when navigating to a different page.
Step 3: We need to add following code in the home.html template
In the example below, we have use toastController to display notification message we user profile data is an update to Firebase database.