Blox Material v1.0.0

Snackbar

Snackbars (sometimes called toasts) are transient messages, displayed at the bottom of the browser window. The snackbar functionality is exposed via the MdcSnackbarService. A snackbar has an optional action button.

Snackbar Service

Currently Showing: <none>

Last Action: <none>

API

Service: MdcSnackbarService

A service for showing spec-aligned material design snackbar/toast messages.

Property Description
leading
boolean

Set this property to true to show snackbars start-aligned instead of center-aligned. Desktop and tablet only.

closeOnEscape
boolean

By default the snackbar closes when the user presses ESC, while it's focused. Set this to false to not close the snackbar when the user presses ESC.

Methods

show(message)

Show a snackbar/toast message. If a snackbar message is already showing, the new message will be queued to show after earlier message have been shown. The returned MdcSnackbarRef provides methods to subscribe to opened, closed, and action click events.

Parameters
message

Queue a snackbar message to show.

Returns
MdcSnackbarRef

Interface: MdcSnackbarMessage

The interface accepted by MdcSnackbarService::show().

Property Description
message
string

The text message to display

actionText
string

The text to display for the action button (optional, default is no action button).

stacked
boolean

Action buttons with long texts should be positioned below the label instead of alongside it. Set the stacked option to true to accomplish this.

timeout
number

The amount of time in milliseconds to show the snackbar (optional, default is 5000ms). Value must be between 4000 and 10000, or -1 to disable the timeout completely.

Interface: MdcSnackbarRef

This class provides information about a posted snackbar message. It can also be used to subscribe to action clicks.

Methods

action()

Subscribe to this observable to be informed when a user clicks the action for the shown snackbar. Note that the observable will complete when the snackbar disappears from screen, so there is no need to unsubscribe.

Returns
Observable<void>
afterOpened()

Subscribe to this observable to be informed when the message is displayed. Note that the observable will complete when the snackbar disappears from screen, so there is no need to unsubscribe.

Returns
Observable<void>
afterClosed()

Subscribe to this observable to be informed when the message has disappeared. Note that the observable will complete immediately afterwards, so there is no need to unsubscribe. The observed value is the reason string that was provided for closing the snackbar.

Returns
Observable<string>