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

The toast is showing up but not hiding. I get this typeError:

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 is this not working in Angular Material? Any way to make this work?

Answer 1

The real problem is how you are using the hide method, it can optionally receive in input a promise to be resolved.

So your code in order 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);
   };
}

Calling the hide method in this way closes the previously defined toast, even if it was defined with hideDelay: 0.