Angular4 Material sidenav not working

Question

I am trying to test out the sidenav functionality in angular4 material. From whatever information I could gather from google. I made this plunker. https://plnkr.co/edit/4VfijY?p=preview

<md-sidenav-container>
  <md-sidenav #sidenav mode="side" opened="true">
    <md-nav-list>
      <a md-list-item>
        Home
      </a>
      <a md-list-item>
        Channels
      </a>
    </md-nav-list>
  </md-sidenav>
</md-sidenav-container>

Could someone point out what am I doing wrong ?. I could use another pair of eyes.

Also if someone has successfully made a working sidenav or has a good tutorial could you please share here ?

Thanks a lot.

Answer 1

Structure of your code is wrong. For sidenav to work all your html code should be inside md-sidenav-container. sidenav.open() method is used to open side nav.

this is working plunkr https://plnkr.co/edit/3Oalufvj8ieRzhYPq7RP?p=preview

<md-sidenav-container>
    <md-sidenav #sidenav>
        <md-nav-list>
            <a md-list-item>
        Home
      </a>
            <a md-list-item>
        Channels
      </a>
        </md-nav-list>
    </md-sidenav>

    <!--***** html part of page should be inside sidenav here *****-->
    <div style="height: 700px;">
        <md-toolbar color="primary">
            Angular Material 2 App
        </md-toolbar>
        <div style="text-align: center;">
            <button md-button (click)="sidenav.open()">Open sidenav</button>
            <p>
                <md-slide-toggle>Slide Toggle</md-slide-toggle>
            </p>
        </div>
    </div>

</md-sidenav-container>

for more info read this https://material.angular.io/components/component/sidenav

i hope this will help :)