Search code examples
angularangular-materialangular-material2

Angular Material2 SideNav onOpen on Close

I'm making a webapplication using Angular 4 and material. I'm using the material "Sidenav" component. I'd like to trigger an event if the sidenav is opened or closed. By adding a function to the click property of the button the event is triggered. But if I close the sidenav by pressing escape or clicking somewhere outside the nav, the click event on the button is logically not working.

There are two properties for the sidenav called onOpen and onClose but I don't understand how to use them. Or are they even the right properties to achieve what I want to do?

Here a plunker for better understanding: http://embed.plnkr.co/ZPmhbFm1hbOUKYp1rV6J/

The result should be an alert with "World" if the sidenav is closed by not pressing the button.

Solution

  • I have seen your plunker demo. You cannot use onOpen and onClose like that. Change your md-sidenav html to following:

    <md-sidenav class="example-sidenav" #sidenav mode="over" opened="false" 
            (open)="menufunction('SideNav Opened')"  
            (close)="menufunction('SideNav Closed')">

    Here is a link to updated plunk: https://plnkr.co/edit/96Hz4rZFJCuyNZDwEpGd?p=preview