如何在组件内使用Angular 2 Material Sidenav？

Question

I'm new to angular and I'm trying to understand the ropes here. The docs of the new angular 2 material are a bit confusing but I managed to add tabs and the sidenav to my app but I can't make a button to open the sidenav using my component. This example is the only reference I have for how it's done and not knowing much about it I think it's using angular 1? https://material.angularjs.org/latest/demo/sidenav

What I have right now in my component is this:

import { Component, OnInit, OnDestroy, ElementRef, Inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {Http, Response} from '@angular/http';

import { MD_TABS_DIRECTIVES } from '@angular2-material/tabs';
import { MD_SIDENAV_DIRECTIVES } from '@angular2-material/sidenav';

@Component({
selector: 'my-ambient-detail',
templateUrl: 'app/ambients/ambient-detail.component.html',
directives: [MD_TABS_DIRECTIVES, MD_SIDENAV_DIRECTIVES],
})
export class AmbientDetailComponent implements OnInit, OnDestroy {


// constructor and other functions here

openRightMenu(){
   //WHAT GOES HERE?
}

}

And in the html:

<md-sidenav-layout>

<!-- Content -->
<md-content>

    <md-button (click)="openRightMenu()">
    Open Right Menu
    </md-button>

</md-content>

<!-- Sidebar -->
<md-sidenav md-component-id="right" class="md-sidenav-right">

Sidebar content
</md-sidenav>
</md-sidenav-layout>

So I can't find a clear reference on how to open/close the sidenav with a button using functions in the component. Maybe I'm doing this all wrong, I built my app starting straight from the heroes tutorial in the angular website but I'm very confused between angular 1 and 2 from my searches on this topic.

Answer 1

You need to grab a ViewChild reference to element by id (#sidenav), and type it to the MdSidenav component. Note that the ViewChild reference is not available yet at constructor, but only after init.

import { Component, ViewChild, OnInit } from '@angular/core';
import { MdSidenav } from '@angular/material';

@Component({
    ...,
    template: `
        <md-sidenav-container>
            <md-sidenav #sidenav mode="side" opened="false"></md-sidenav>
        </md-sidenav-container>
       `
})

export class MyComponent implements OnInit {
    @ViewChild('sidenav') sidenav: MdSidenav;

    constructor() {}

    ngOnInit() {
        this.sidenav.onOpen.subscribe(() => {
            console.log("Sidenav opened");
        });

        setTimeout(this.openSidenav.bind(this), 5000);
    }

    openSidenav() {
        this.sidenav.open();
    }
 }

Answer 2

Apparently that was indeed angular 1, I finally found this: https://justindujardin.github.io/ng2-material/#/components/sidenav that seems to be using angular 2 and I didn't even need to have a function in my component:

<md-sidenav-layout>

  <!-- Content -->
  <md-content>
    <md-button (click)="right.open()">
      Open Right Menu
    </md-button>
  </md-content>

  <!-- Sidebar -->
  <md-sidenav #right md-component-id="right" class="md-sidenav-right">
    Sidebar content
  </md-sidenav>

</md-sidenav-layout>