title: Angular 5 Material Sidenav not closing on backdrop click
body: <p>I have the following markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-sidenav-container (backdropClick)="close()" class="dashboard-mat-sidenav-container"&gt;
  
    &lt;mat-sidenav #leftSideNav mode="side"
     opened="true" position="start"
      [fixedInViewport]="true"&gt;
      &lt;ak-left-nav&gt;&lt;/ak-left-nav&gt;
    &lt;/mat-sidenav&gt; 
  
    &lt;mat-sidenav-content&gt;        
       &lt;ak-header&gt;
        &lt;ak-search-button (click)="searchSideNav.open()"&gt;&lt;/ak-search-button&gt;
       &lt;/ak-header&gt;    
       &lt;ak-dashboard&gt;&lt;/ak-dashboard&gt;
  
       &lt;ak-left-nav-btn (click)="leftSideNav.open()"&gt;&lt;/ak-left-nav-btn&gt;
  
       &lt;div class="wb-menu-button" id="wb-button-search-mobile" (click)="searchSideNav.open()"&gt;        
          &lt;div&gt;&lt;i class="fas fa-search"&gt;&lt;/i&gt;&lt;/div&gt;
       &lt;/div&gt;
  
       &lt;mat-sidenav #searchSideNav position="end"&gt;       
         Search bar  
       &lt;/mat-sidenav&gt; 
  
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p>What I'm trying to achieve is: Have 2 sidenavs in the screen: one always open, the other that can be toggled between open and close.</p>
  
  <p>The problem is that with this code, I have been able to achieve the above, but now the toggle-able sidenav doesn't close on the click of backdrop (backdrop means mat-sidenav-container). I've added an explicit method that should respond to clicks on the backdrop, but it doesn't respond.</p>