API Reference

$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

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);

    Shows the toast.

    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'.