title: Angular 6 mat-sidenav toggle menu not working
body: <p>I have created a sidebar nav menu in Angular 6 something like.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>But when I click on the  toggle menu icon sidebar nav should not be fullwidth expand.</p>
  
  <p>But on click of toggle menu icon  in sidebar (from sidebar component), I'm not sure where the mistake is made.</p>
  
  <p><strong>sidenav.component.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-sidenav-container fullscreen&gt;
    &lt;mat-sidenav #sidenav  mode="side" class="example-sidenav" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true" (mouseenter)="increase()"
      (mouseleave)="decrease()"&gt;
      &lt;div class="logomain"&gt;Logo Part&lt;/div&gt;
      &lt;mat-nav-list&gt;
        &lt;mat-list-item routerLink="1" routerLinkActive="active" &gt;
          &lt;mat-icon mat-list-icon&gt;person&lt;/mat-icon&gt;
          &lt;div fxFlex="10"&gt;&lt;/div&gt;
          &lt;div *ngIf="sidenavWidth &gt; 6" class="sidenav-item"&gt;
            &lt;h5 class="lead"&gt;About&lt;/h5&gt;
          &lt;/div&gt;
        &lt;/mat-list-item&gt;
  
        &lt;mat-list-item routerLink="2" routerLinkActive="active"&gt;
          &lt;mat-icon mat-list-icon&gt;settings&lt;/mat-icon&gt;
          &lt;div fxFlex="10"&gt;&lt;/div&gt;
          &lt;div *ngIf="sidenavWidth &gt; 6" class="sidenav-item"&gt;
            &lt;h5 class="lead"&gt;Services&lt;/h5&gt;
          &lt;/div&gt;
        &lt;/mat-list-item&gt;
  
        &lt;mat-list-item routerLink="3" routerLinkActive="active"&gt;
          &lt;mat-icon mat-list-icon&gt;local_phone&lt;/mat-icon&gt;
          &lt;div fxFlex="10"&gt;&lt;/div&gt;
          &lt;div *ngIf="sidenavWidth &gt; 6" class="sidenav-item"&gt;
            &lt;h5 class="lead"&gt;Contact&lt;/h5&gt;
          &lt;/div&gt;
        &lt;/mat-list-item&gt;
  
  
  
      &lt;/mat-nav-list&gt;
  
    &lt;/mat-sidenav&gt;
  
    &lt;div class="example-sidenav-content"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;mat-icon (click)="sidenav.toggle()" class="sidenav-menu"&gt;menu&lt;/mat-icon&gt;
    &lt;/div&gt;
  
  
  &lt;/mat-sidenav-container&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>sidenav.component.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  @Component ({
    selector: 'app-sidenav',
    templateUrl: './sidenav.component.html',
    styleUrls: ['./sidenav.css']
  })
  
  export class SidenavComponent implements OnInit {
    sidenavWidth = 4;
    ngStyle: string;
    constructor (private router: Router) {
  
    }
  
    ngOnInit () {
  
    }
  
    increase() {
      this.sidenavWidth = 15;
      console.log('increase sidenav width');
    }
    decrease() {
      this.sidenavWidth = 4;
      console.log('decrease sidenav width');
    }
    // sidenavToggle() {
    //   this.ngStyle = 'this.sidenavWidth = 15';
    //   console.log('sidenav width incrases');
    // }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Running stackblitz example:
  <a href="https://stackblitz.com/edit/angular-material-with-angular-sidenav" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-material-with-angular-sidenav</a></p>