How to hide side navigation bar in angular 2 material

Question

I am trying to create responsive side navigation bar using angular 2 material. My side nav is working. It is always opened navigation bar.How do i hide it when reducing the screen size.

This is my code:

<md-sidenav-container style="width: 100%" onloadstart="false">
  <div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
    <md-toolbar color="primary">
      <md-icon>menu</md-icon>
      <span>Profile</span>
      <span class="example-fill-remaining-space"></span>
      <span>
        <button md-icon-button [mdMenuTriggerFor]="menu"><md-icon>more_vert</md-icon></button>
        <md-menu #menu="mdMenu">
          <button md-menu-item><md-icon>swap_horiz</md-icon><span>toggle</span></button>
          <button md-menu-item disabled><md-icon>person</md-icon><span>profile</span></button>
          <button md-menu-item><md-icon>exit_to_app</md-icon><span>log out</span></button>
        </md-menu>
      </span>
    </md-toolbar>
    <md-sidenav-layout class="demo-sidenav-layout">
      <md-sidenav align="start" mode="side" opened>
        <md-list>
          <md-list-item>
            <a routerLink="profile-home"><button md-button ><md-icon>home</md-icon> Home </button></a></md-list-item>
          <md-list-item>
            <a routerLink="profile-security"><button md-button ><md-icon>security</md-icon> Security </button></a></md-list-item>
          <md-list-item>
            <a routerLink="profile-settings"><button md-button ><md-icon>settings</md-icon>Settings </button></a></md-list-item>
        </md-list>
      </md-sidenav>
      <router-outlet></router-outlet>
    </md-sidenav-layout>
  </div>
</md-sidenav-container> 

Answer 1

Just add a class to your md-sidenav, then have that class hide it when the screen is small enough.

In your template, add the class to the md-sidenav

...

<md-sidenav align="start" mode="side" opened class="hide-on-small-screens">
        <md-list>
          <md-list-item>

...

In your css, implement your class

...

@media only screen and (max-width: 500px) {
    .hide-on-small-screens {
        display: none;
    }
}

...

This will hide the sidenav if the screen is 500px or smaller. Look up media queries for more information on how to use this method.

Answer 2

Your view file: You have to add #sidenav document refernce variable in your component html file.

<mat-sidenav #sidenav>
   ...
 </mat-sidenav>

Your TS file: The variable which you have declared in html file you can access that variable in component ts file with the help @viewchild and please don't forget to define the type of sidenav to MatSidenav. after that you can easily access all the methods which are available on MatSidenav like close, open, toggle etc.

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

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

      @ViewChild('sidenav') sidenav: MatSidenav;
      constructor(){

      }

      ngOnInit(){}

      toggleSideNav(){
        this.sidenav.toggle();
      }
    }

Answer 3

I understand that styling should stay with CSS but I've taken a different approach to solve this issue.

I make use of Angular ViewChild and Hostlistener modules to control that programmatically. It gives you more control over what you want to do when the size of the window changes.

In your view/html:

<md-sidenav #sidenav align="start" mode="side" opened>
    ...
</md-sidenav/>

In your typescript file:

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

export class ClassName implements AfterViewInit {
    @ViewChild('sidenav') sidenav: MdSidenav;

    constructor() {}

    @HostListener('window:resize', [$event])
    onResize(event): void {
        if (this.sidenav !== undefined) {
            if (event.target.innerWidth <= 500) { // This can be any value.
                this.sidenav.close();
            } else {
                this.sidenav.open();
            }
        }
    }
}

With this approach the onResize method will run every time a window resize event is executed.