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 |
|---|---|
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 |
|
| 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 |
|
| Returns | |
Observable<string>
|
|