Material: Fire an event when a sidenav is closed because md-backdrop is clicked

[infomofo]

On the "material.components.sidenav" demo page they demonstrate how you can print a log message when the right sidenav is toggled, and when the close button is explicitly pressed. Both will log events to the console.

https://material.angularjs.org/latest/#/demo/material.components.sidenav

However the close event does NOT fire if you click on the md-backdrop that is generated. If you click on the grey backdrop that appears while the right sidenav is open, it will close the right sidenav but nothing is printed to the log.

What would be the most idiomatic way to have an event like a console log fire when the md-backdrop is clicked. Is this something that needs to be added to the library, or if it already exists, added to the documentation?

[george3447]

+1

[fresc81]

+1. Also a $watch on $mdSideNav('mySideNav').isOpen() does not work here because isOpen() returns the new state before the actual animation finishes. There's no method that can be used to check if the nav has actually been closed (and the animation has finished) by a user clicking beside the nav. The solution would IMO be to let isOpen() return the open/closed state AFTER the animation has been finished. So I could grab the event from the $watch. By now I have to use a timer based solution that waits after the $watch until the nav closing animation finishes.
I feel like referencing #974 because the promise-based solution does not handle this, which I think is a design flaw.
Any thoughts?

[manuelro]

+1. However, using a $scope watcher does work, not a nice solution but it does the job (angular-material 0.10.1 here). But it certainly lacks of a way to really know when the animation is done.

(coffeescript)

$scope.$watch(
    -> $mdSidenav(sidenavId).isOpen() 
    -> if $mdSidenav(sidenavId).isOpen() then doSomething()
)

[sebastianhenneberg]

+1

[EladBezalel]

dup of #3179