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.
API
Service: MdcSnackbarService
A service for showing spec-aligned material design snackbar/toast messages.
| Property | Description |
|---|---|
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 | |
| 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). |
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> | |