How to hide Angular Material mdToast?

Question

app.controller('testCtrl', function ($rootScope, $scope, $mdToast) 
{   
    $scope.showHideToast = function () {
        $mdToast.show({
                template: '<md-toast>test</md-toast>',
                hideDelay: 0,
                position: 'bottom right'
          });

        // DO STUFF

        $mdToast.hide();
}

A toast appears, but is not hidden. I get this type ofError:

TypeError: undefined is not a function
at Object.onRemove (../angular-material/angular-material.js:4240:13)
at Object.InterimElement.self.remove (../angular-material/angular-material.js:5103:29) 
at Object.hide (../angular-material/angular-material.js:5032:40)
...

Why doesn't this work in Angular Material? Any way to make this work?

Answer 1

The real problem is how you use the method hide, it can, if desired, receive a promise at the input that will be resolved.

So, your code to work should be:

app.controller('testCtrl', function ($rootScope, $scope, $mdToast) 
{   
    $scope.showHideToast = function () {
        // hold the reference
        var myToast = $mdToast.show({
                        template  : '<md-toast>test</md-toast>',
                        hideDelay : 0,
                        position  : 'bottom right'
                      });

        // DO STUFF

        // hide the toast
        $mdToast.hide(myToast);
   };
}

A method call hidethus closes a previously defined toast, even if it was defined using hideDelay: 0.

Answer 2

, . hideDelay 0, , . , , hideDelay.

, , $mdToast.hide().

:

$mdToast.show({
  template: '<md-toast class="md-warn">Test</md-toast>',
  hideDelay: 2000
});

2

EDIT:

, hammerjs. 2.0.0 . IMO

Answer 3

hideDelay 0. 6000. 0 , .