0

I'm using Angular 5 with Angular Material. I have 2 sidenavs on my page, one on the left and the other on the right. I need to lock open the left sidenav and have a button to open the right sidenav. It is possible to achieve this in AngularJS: https://material.angularjs.org/latest/demo/sidenav

I need to have the same functionality with Angular 5 and Material. Help will be appreciated.

Here is my code:

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

  <mat-sidenav-content>        
    <wab-header>
      <wab-search-button (click)="searchSideNav.open()"></wab-search-button>
    </wab-header>
      <wab-dashboard-quotes></wab-dashboard-quotes>

      <wab-left-nav-btn (click)="leftSideNav.open()"></wab-left-nav-btn>

      <div class="wb-menu-button" id="wb-button-search-mobile" (click)="searchSideNav.open()">        
        <div><i class="fas fa-search"></i></div>
      </div>

  </mat-sidenav-content>

  <mat-sidenav #leftSideNav position="start">
      <wab-left-nav>
      </wab-left-nav>
   </mat-sidenav>   

  <mat-sidenav #searchSideNav position="end">
     <wab-search-bar>
        <div (click)="searchSideNav.close()" id="search-box-close-btn"><i class="fas fa-window-close"></i></div>
     </wab-search-bar>
  </mat-sidenav> 

</mat-sidenav-container>

The problem is that if I lock the left sidenav in the open state, the right sidenav doesn't open at all.

user5957597
  • 71
  • 1
  • 8
  • Can you check this https://stackoverflow.com/questions/48073057/angular-open-close-sidenav-from-another-component/48076331#48076331 – Eldho Apr 02 '18 at 06:22
  • Possible duplicate of [Angular - Open/Close sidenav from another component](https://stackoverflow.com/questions/48073057/angular-open-close-sidenav-from-another-component) – Eldho Apr 02 '18 at 06:23
  • Thank you for the suggestion, @Eldho (https://stackoverflow.com/users/1876572/eldho) . It served my purpose. There's an issue with the example provided: the sidenav being toggled doesn't close on clicking the backdrop. – user5957597 Apr 02 '18 at 12:07
  • I would suggest to fork the example and tweak for the backdrop. – Eldho Apr 02 '18 at 12:08

0 Answers0