What is the meaning of # inside an Angular2 HTML directive - html

Question

I'm trying to trigger the state of the sidenav (opened and closed). I have this:
<div class="viewport">
<md-toolbar color="primary">
<button *ngIf="!isNavbarOpen" md-icon-button (click)="sidenav.open()"><md-icon>menu</md-icon></button>
<button *ngIf="isNavbarOpen" md-icon-button (click)="sidenav.close()"><md-icon>close</md-icon></button>
<span class="toolbar-title">Title</span>
</md-toolbar>
<md-sidenav-layout>
<md-sidenav align="start" mode="over" #sidenav>
Sidenav
</md-sidenav>
</md-sidenav-layout>
</div>
How can I use the #sidenav from my TypeScript file to change the isNavbarOpen field whenever the sidenav state changes?
or
How could I override the sidenav.open() method?

Answer 1

Here is a better approach so you can use all the properties and subscribe to all the events. Don't pass it to the open()/close() function.
<div class="viewport">
<md-toolbar color="primary">
<button *ngIf="!isNavbarOpen" md-icon-button (click)="open()"><md-icon>menu</md-icon></button>
<button *ngIf="isNavbarOpen" md-icon-button (click)="close()"><md-icon>close</md-icon></button>
<span class="toolbar-title">Title</span>
</md-toolbar>
<md-sidenav-layout>
<md-sidenav align="start" mode="over" #sidenav>
Sidenav
</md-sidenav>
</md-sidenav-layout>
</div>
Instead references it by using "ViewChild" and MdSidenav:
import { Component, ViewChild, OnInit } from '#angular/core';
import { MdSidenav } from '#angular/material';
#Component({
....
})
export class AppComponent implements OnInit {
public isNavbarOpen: boolean;
// This gets a reference to the #sidenav
#ViewChild('sidenav') sidenav: MdSidenav;
ngOnInit() {
// Subscribe to the onCloseStart event
this.sidenav.onCloseStart.subscribe(() => {
this.isNavbarOpen = true;
});
}
open() {
this.sideNav.open();
}
}