AngularJS 1 Reference > ons-toast

ons-toast

The Toast or Snackbar component is useful for displaying dismissable information or simple actions at (normally) the bottom of the page. This component does not block user input, allowing the app to continue its flow. For simple toasts, consider ons.notification.toast instead.

Tutorial

Dialogs

Dialogs are defined using the <ons-dialog>, <ons-alert-dialog> and <ons-toast> tags.

<ons-dialog var="dialog">
  This is a dialog!
</ons-dialog>

var attribute is used to store the dialog in a variable for later access.

Alert dialogs work exactly like normal dialogs but they require some additional markup. With this element you can create a beautifully styled dialog without any additional CSS.

<ons-alert-dialog>
  <div class="alert-dialog-title">Warning!</div>
  <div class="alert-dialog-content">
    An error has occurred!
  </div>
  <div class="alert-dialog-footer">
    <button class="alert-dialog-button">Cancel</button>
    <button class="alert-dialog-button">OK</button>
  </div>
</ons-alert-dialog>

Dialogs are hidden by default and usually attached as direct children of the <body> tag.

Displaying a dialog

To display a dialog you need to get a reference to the element and execute the show(options) method. It is hidden with the hide(options) method.

Loading from a template

Another way to use dialogs is with the ons.createElement(template) utility function. The dialog needs to be defined as a template and the function returns a Promise that resolves to the dialog element.

<template id="dialog.html">
  <ons-dialog>
    This dialog is defined as a template.
  </ons-dialog>
</template>

ons
  .createElement('dialog.html', { append: true })
  .then(function(dialog) {
    dialog.show();
  });

For AngularJS, an extra parameter can be passed to specify the scope of the new popover: ons.createElement('dialog.html', { parentScope: $scope });

The cancelable attribute

The <ons-dialog>, <ons-alert-dialog> and <ons-toast> support the cancelable attribute. This enables hiding the dialog by tapping outside of it or by pressing the back button on Android devices.

<ons-dialog cancelable>
  This dialog can be cancelled!
</ons-dialog>

Try adding the cancelable attribute to one of the dialogs to see how it works.

Notification

Another way to display dialogs is with the ons.notification methods:

  • ons.notification.alert(options)
  • ons.notification.confirm(options)
  • ons.notification.prompt(options)
  • ons.notification.toast(options)

These methods all return a Promise. For the confirm it resolves to the index of the button pressed and for the prompt it resolves to the user input.

ons
  .notification.prompt({message: 'What is your name?'})
  .then(function(name) {
    ons.notification.alert('Hello ' + name);
  });

See also

Attributes

[improve this]
Name Type Description
animation String
default 		The animation used when showing and hiding the toast. Can be either "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none". Optional.
animation-options Expression Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}. Optional.
visible Boolean Whether the toast is visible or not. Optional.
var String Variable name to refer this toast dialog. Optional. Works only during initialization.
ons-preshow Expression Allows you to specify custom behavior when the “preshow” event is fired. Optional. Works only during initialization.
ons-prehide Expression Allows you to specify custom behavior when the “prehide” event is fired. Optional. Works only during initialization.
ons-postshow Expression Allows you to specify custom behavior when the “postshow” event is fired. Optional. Works only during initialization.
ons-posthide Expression Allows you to specify custom behavior when the “posthide” event is fired. Optional. Works only during initialization.
ons-destroy Expression Allows you to specify custom behavior when the “destroy” event is fired. Optional. Works only during initialization.

Properties

[improve this]
Name Description
animationOptions Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}.
onDeviceBackButton Back-button handler.
visible Whether the element is visible or not.

Methods

[improve this]
Signature Description
show([options]) Show the element.
toggle([options]) Toggle toast visibility.
hide([options]) Hide toast.
on(eventName, listener) Add an event listener.
once(eventName, listener) Add an event listener that’s only triggered once.
off(eventName, [listener]) Remove an event listener. If the listener is not specified all listeners for the event type will be removed.
show([options]): Promise

Show the element.

Returns: Resolves to the displayed element

Parameters
Name Type Description
options Object Parameter object.
options.animation String Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
options.animationOptions String Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
toggle([options])

Toggle toast visibility.

Parameters
Name Type Description
options Object Parameter object.
options.animation String Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
options.animationOptions String Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
hide([options]): Promise

Hide toast.

Returns: Resolves to the hidden element

Parameters
Name Type Description
options Object Parameter object.
options.animation String Animation name. Available animations are "default", "ascend" (Android), "lift" (iOS), "fall", "fade" or "none".
options.animationOptions String Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}.
on(eventName, listener)

Add an event listener.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.
once(eventName, listener)

Add an event listener that’s only triggered once.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.
off(eventName, [listener])

Remove an event listener. If the listener is not specified all listeners for the event type will be removed.

Parameters
Name Type Description
eventName String Name of the event.
listener Function Function to execute when the event is triggered.

Events

[improve this]

Some Onsen UI components have overlapping event names. For example, ons-carousel and ons-navigator both emit postchange events. Stop overlapping events from propagating to avoid conflicts: document.querySelector('ons-carousel').on('postchange', e => e.stopPropagation()).

Name Description
preshow Fired just before the toast is displayed.
postshow Fired just after the toast is displayed.
prehide Fired just before the toast is hidden.
posthide Fired just after the toast is hidden.
preshow

Fired just before the toast is displayed.

Parameters
Name Type Description
event Object Event object.
event.toast Object Toast object.
event.cancel Function Execute to stop the toast from showing.
postshow

Fired just after the toast is displayed.

Parameters
Name Type Description
event Object Event object.
event.toast Object Toast object.
prehide

Fired just before the toast is hidden.

Parameters
Name Type Description
event Object Event object.
event.toast Object Toast object.
event.cancel Function Execute to stop the toast from hiding.
posthide

Fired just after the toast is hidden.

Parameters
Name Type Description
event Object Event object.
event.toast Object Toast object.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.