How to use EventEmitter(onClose) of the sidenav

Question

I want to check when my

<md-sidenav>

is getting closed. Is there a way to use the EventEmitter onClose of my sidenav object to check that? and can you give me an example?

Answer 1

This is possible in 2 different ways - via the template, and within the component code itself.

Assuming an HTML template such as the following:

<md-sidenav-container>
  <md-sidenav #mySidenav (close)="onClose()" mode="side">
    This is sidenav content
  </md-sidenav>
  <button md-raised-button (click)="mySidenav.toggle()">Toggle Sidenav</button>
</md-sidenav-container>

In your component you can have something like this:

import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
import { MdSidenav } from '@angular/material'
import { Subscription } from 'rxjs'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  @ViewChild('mySidenav')
  sidenav: MdSidenav;

  subscription: Subscription;

  ngAfterViewInit(): void {
    this.subscription = this.sidenav.onClose.subscribe(() =>
      console.log("Closed event from observable"));
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  onClose(): void {
    console.log("Closed event from template");
  }

}

Technique 1 is to use an event binding. This is the (close)="onClose()" section of the template. Whenever the close event is fired by the sidenav, the code specified in the quotes (i.e. onClose()) is run. In this scenario, the method onClose() (which is defined in the component code) is called, and prints some text to the console. You can find out more about this technique in the Event Bindings section of the angular documentation.

Technique 2 is to subscribe to the event in the component code itself. In this technique we export the sidenav as the variable mySidenav. This is the #mySidenav section of the template. In the component code we can get a reference to the sidenav by using the @ViewChild('mySidenav') annotation. When our component is initialised, we can gain access to the sidenav and hence run some code whenever the close event is fired. In this scenario, we use the subscribe() method of the Observable interface. It's important to unsubscribe from the subscription when the compoenent is destroyed to prevent memory leaks, hence the unsubscribe() call in ngOnDestroy(). You can find out more about observables in the Observables section of the rxjs documentation.

Answer 2

Its actually very simple as below

HTML

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav" (close)="onClose()" >
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
    <button md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

Handling the method in Component Class as

onClose(){
    window.alert('closed the side nav bar');

  }

LIVE DEMO