Btukfyl

I am using side-nav component in my project for routing between the components,which looks like this:

Here i am facing an issue.The side-nav appears as toggle-menu for mobile devices as shown in the image. When i click/select any list-item (ex Home) .The side-nav should close.But it is not.

I have asked it once, still no appropriate solution.

Here is the stackblitz DEMO

You can do this by

• providing a reference to mat-sidenav as <mat-sidenav #snav
  


• Using this reference to toggle or close the mat-sidenav, from where you want this side nav to close. Say, from an anchor click as
  <a mat-list-item routerLink="." *ngFor="let nav of fillerNav" (click)="snav.toggle()" >
  


• You can use (click)="snav.toggle()" or (click)="snav.close()"
  

Code :

<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" 

[fixedInViewport]="mobileQuery.matches" fixedTopGap="56">

      <mat-nav-list>

        <a mat-list-item routerLink="." *ngFor="let nav of fillerNav" 

          (click)="snav.toggle()" >{{nav}}</a>

      </mat-nav-list>

    </mat-sidenav>

Stackblitz Demo showing closing of side nav on clicking on item-link

Application Code : https://stackblitz.com/edit/angular-close-side-nav-on-button-click?file=app%2Fsidenav-responsive-example.html

Update 1 :

• 
  

  Side Nav will close only in mobile mode, and not in desktop mode.

  
  
  

  Code attached in Question

  
  

Not the best solution but consider this:

    <mat-sidenav-container class="sidenav-container">

      <mat-sidenav #drawer fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"

        [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">

        <mat-toolbar color="primary" style="margin-top:30px;"> Business</mat-toolbar>



        <mat-nav-list >

          <mat-list-item (click)="select('home')"  >

            <mat-icon matListIcon>home</mat-icon>

            <span matLine>Home</span>

          </mat-list-item>



          <mat-list-item (click)="select('person')" >

            <mat-icon matListIcon>person</mat-icon>

            <span matLine>Customers</span>

          </mat-list-item>



          <mat-list-item (click)="select('employees')" >

            <mat-icon matListIcon>group_work</mat-icon>

            <span matLine>employees</span>

          </mat-list-item>



          <mat-list-item (click)="select('business')">

            <mat-icon matListIcon>business</mat-icon>

            <span matLine>Business</span>

          </mat-list-item>



        </mat-nav-list>

      </mat-sidenav>



      <mat-sidenav-content>

        <mat-toolbar color="primary">

          <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">

            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>

          </button>



        </mat-toolbar>



        <div class="ylb-app-content">

          <ng-content></ng-content>

        </div>

      </mat-sidenav-content>

    </mat-sidenav-container>

and in the ts add a function like:

select(option: string) {

  // handle it

  this.viewChild.toggle();

}

In your Demo,
I added following content in component.ts file and it is working fine.
I took reference of element in ts file and called toggle method.
Please try this and let me know if it is working fine or not.

export class SidenavResponsiveExample {

    @ViewChild('drawer') drawer;



    selected(option: string) {

        this.drawer.toggle();

    }

}

Demo: https://stackblitz.com/edit/angular-5ll5i7-a6je6c