CODEWITHSUNDEEP
angularangular-materialangular-material2
Leonzen
Leonzen

Reputation: 1265

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.

Upvotes: 3

Views: 6277

Answers (3)

Amir Esmaeili
Amir Esmaeili

Reputation: 88

There is a built-in event openedChanged which returns a boolean.

(openedChanged)=function($event)

Upvotes: 1

FatL
FatL

Reputation: 171

onOpen and onClose are @Output() events emitted by your sidenav.

In order to use them you have to "store" your sidenav in a component's attribute :

@ViewChild('sidenav')
public sidenav: MdSidenav;

and to subscribe to the event to do what you want to do when these events are emitted (I would advise to put this code in ngOnInit()) :

this.sidenav.onOpen.subscribe(() => this.menufunction('Hello'));

Upvotes: 2

FAISAL
FAISAL

Reputation: 34673

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

Upvotes: 4

Related Questions