Toast

Improve this doc

A Toast is a subtle notification that appears at the bottom of the screen. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes a backdrop, which can optionally be clicked to dismiss the toast.

Creating

All of the toast options should be passed in the first argument of the create method: Toast.create(opts). The message to display should be passed in the message property. The showCloseButton option can be set to true in order to display a close button on the toast. See the create method below for all available options.

Dismissing

The toast can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the duration of the toast options. It can also be dismissed by clicking on the backdrop, unless enableBackdropDismiss is set to false upon creation. If showCloseButton is set to true, then the close button will dismiss the toast. To dismiss the toast after creation, call the dismiss() method on the Toast instance. The onDismiss function can be called to perform an action after the toast is dismissed.

Usage

constructor(nav: NavController) {
  this.nav = nav;
}

presentToast() {
  let toast = Toast.create({
    message: 'User was added successfully',
    duration: 3000
  });

  toast.onDismiss(() => {
    console.log('Dismissed toast');
  });

  this.nav.present(toast);
}

Static Members

`create(opts)`

Toast options

Property	Type	Default	Description
message	`string`	-	The message for the toast. Long strings will wrap and the toast container will expand.
duration	`number`	-	How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.
cssClass	`string`	-	Any additional class for custom styles.
showCloseButton	`boolean`	false	Whether or not to show a button to close the toast.
closeButtonText	`string`	“Close”	Text to display in the close button.
enableBackdropDismiss	`boolean`	true	Whether the toast should be dismissed by tapping the backdrop.
dismissOnPageChange	`boolean`	false	Whether to dismiss the toast when navigating to a new page.

Param	Type	Details
opts	`object`	Toast options. See the above table for available options.

Instance Members

`setMessage(message)`

Param	Type	Details
message	`string`	Toast message content