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.

Buttons & Anchors Demo

Currently Showing: <none>

Last Action: <none>

API

Service: MdcSnackbarService

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

PropertyDescription
startAligned
boolean

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

dismissesOnAction
boolean

By default the snackbar will be dimissed when the user presses the action button. If you want the snackbar to remain visible until the timeout is reached (regardless of whether the user pressed the action button or not) you can set the dismissesOnAction property to false.

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 action clicks.

Parameters
message

Queue a snackbar message to show.

Returns
MdcSnackbarRef

Interface: MdcSnackbarMessage

The interface accepted by MdcSnackbarService::show().

PropertyDescription
message
string

The text message to display

actionText
string

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

multiline
boolean

Whether to show the snackbar with space for multiple lines of text (optional, default is false).

actionOnBottom
boolean

Whether to show the action below the multiple lines of text (optional, only applies when multiline is true).

timeout
number

The amount of time in milliseconds to show the snackbar (optional, default is 2750ms).

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>
afterShow()

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>
afterHide()

Subscribe to this observable to be informed when the message disappears. Note that the observable will complete immediately afterwards, so there is no need to unsubscribe.

Returns
Observable<void>