$mdToast
is a service to build a toast notification on any position
on the screen with an optional duration, and provides a simple promise API.
Restrictions on custom toasts
- The toast's template must have an outer
<md-toast>
element.
- For a toast action, use element with class
md-action
.
- Add the class
md-capsule
for curved corners.
Usage
Open a Toast!
var app = angular.module('app', ['ngMaterial']);
app.controller('MyController', function($scope, $mdToast) {
$scope.openToast = function($event) {
$mdToast.show($mdToast.simple().content('Hello!'));
// Could also do $mdToast.showSimple('Hello');
};
});
Methods
-
$mdToast.showSimple();
Convenience method which builds and shows a simple toast.
Returns |
Description |
promise |
A promise that can be resolved with $mdToast.hide() or
rejected with $mdToast.cancel() .
|
-
$mdToast.simple();
Builds a preconfigured toast.
Returns |
Description |
obj |
a $mdToastPreset with the chainable configuration methods:
- $mdToastPreset#content(string) - sets toast content to string
- $mdToastPreset#action(string) - adds an action button. If clicked the promise (returned from
show() ) will resolve
with value 'ok'; otherwise it promise is resolved with 'true' after a hideDelay timeout.
- $mdToastPreset#highlightAction(boolean) - sets action button to be highlighted
- $mdToastPreset#capsule(boolean) - adds 'md-capsule' class to the toast (curved corners)
- $mdToastPreset#theme(string) - sets the theme on the toast to theme (default is
$mdThemingProvider 's default theme)
|
-
$mdToast.updateContent();
Updates the content of an existing toast. Useful for updating things like counts, etc.
-
$mdToast.build();
Creates a custom $mdToastPreset
that you can configure.
Returns |
Description |
obj |
a $mdToastPreset with the chainable configuration methods for shows' options (see below).
|
-
$mdToast.show(optionsOrPreset);
Parameter |
Type |
Description |
* optionsOrPreset
object
|
object |
Either provide an $mdToastPreset returned from simple()
and build() , or an options object with the following properties:
templateUrl - {string=} : The url of an html template file that will
be used as the content of the toast. Restrictions: the template must
have an outer md-toast element.
template - {string=} : Same as templateUrl, except this is an actual
template string.
scope - {object=} : the scope to link the template / controller to. If none is specified, it will create a new child scope.
This scope will be destroyed when the toast is removed unless preserveScope is set to true.
preserveScope - {boolean=} : whether to preserve the scope when the element is removed. Default is false
hideDelay - {number=} : How many milliseconds the toast should stay
active before automatically closing. Set to 0 or false to have the toast stay open until
closed manually. Default: 3000.
position - {string=} : Where to place the toast. Available: any combination
of 'bottom', 'left', 'top', 'right', 'fit'. Default: 'bottom left'.
controller - {string=} : The controller to associate with this toast.
The controller will be injected the local $hideToast , which is a function
used to hide the toast.
locals - {string=} : An object containing key/value pairs. The keys will
be used as names of values to inject into the controller. For example,
locals: {three: 3} would inject three into the controller with the value
of 3.
bindToController - bool : bind the locals to the controller, instead of passing them in. These values will not be available until after initialization.
resolve - {object=} : Similar to locals, except it takes promises as values
and the toast will not open until the promises resolve.
controllerAs - {string=} : An alias to assign the controller to on the scope.
parent - {element=} : The element to append the toast to. Defaults to appending
to the root element of the application.
|
Returns |
Description |
promise |
A promise that can be resolved with $mdToast.hide() or
rejected with $mdToast.cancel() . $mdToast.hide() will resolve either with a Boolean
value == 'true' or the value passed as an argument to $mdToast.hide() .
And $mdToast.cancel() will resolve the promise with a Boolean value == 'false'
|
-
$mdToast.hide([response]);
Hide an existing toast and resolve the promise returned from $mdToast.show()
.
Parameter |
Type |
Description |
response
*
|
* |
An argument for the resolved promise.
|
Returns |
Description |
promise |
a promise that is called when the existing element is removed from the DOM.
The promise is resolved with either a Boolean value == 'true' or the value passed as the
argument to .hide() .
|
-
$mdToast.cancel([response]);
Hide the existing toast and reject the promise returned from
$mdToast.show()
.
Parameter |
Type |
Description |
response
*
|
* |
An argument for the rejected promise.
|
Returns |
Description |
promise |
a promise that is called when the existing element is removed from the DOM
The promise is resolved with a Boolean value == 'false'.
|