md-sidenav Angular material prevent click outside to close

Question

I need to prevent the sidenav closing if i click outside it (if i click on the md-backdrop). For the md-dialog for example there is a directive called: clickOutsideToClose where false means it doesn't close the dialog if click outside. I need something like this. Is it possibile? Here's an example of the nav: http://codepen.io/ThomasBurleson/pen/LEZvWw

<div ng-app="sidenavDemo1" ng-controller="AppCtrl" layout="column" layout-fill>
  <section layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
      <md-toolbar class="md-theme-indigo" layout="row">
        <h1 class="md-toolbar-tools">Sidenav Left</h1>
        <span flex>
        <md-menu>
      <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
        <md-icon md-menu-origin class="material-icons">phone</md-icon>
      </md-button>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button ng-click="ctrl.redial($event)">
            <md-icon md-svg-icon="call:dialpad" md-menu-align-target></md-icon>
            Redial
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button disabled="disabled" ng-click="ctrl.checkVoicemail()">
            <md-icon md-svg-icon="call:voicemail"></md-icon>
            Check voicemail
          </md-button>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>
        <md-menu-item>
          <md-button ng-click="ctrl.toggleNotifications()">
            <md-icon md-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon>
            {{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu> 
      </md-toolbar>
      <md-content class="md-padding" ng-controller="LeftCtrl">
        <md-button ng-click="close()" class="md-primary" hide-gt-md>
          Close Sidenav Left
        </md-button>
        <p hide-md show-gt-md>
          This sidenav is locked open on your device. To go back to the default behavior,
          narrow your display.
        </p>
        <p> 
        The "right" sideNav is open = {{isOpen()}} </p>
      </md-content>
    </md-sidenav>
    <md-content flex class="md-padding">
      <div layout="column" layout-fill layout-align="center center">
        <p>
        The left sidenav will 'lock open' on a medium (>=960px wide) device.
        </p>
        <div>
          <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md>
            Toggle left
          </md-button>
        </div>
        <div>
          <md-button ng-click="toggle()" class="md-primary" >
            Toggle right
          </md-button>
        </div>
      </div>
    </md-content>
    <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
      <md-toolbar class="md-theme-light">
        <h1 class="md-toolbar-tools">Sidenav Right</h1>
      </md-toolbar>
      <md-content ng-controller="RightCtrl" class="md-padding">
        <md-button ng-click="close()" class="md-primary">
          Close Sidenav Right
        </md-button>
      </md-content>
    </md-sidenav>
  </section>
</div>

Answer 1

You just need to use md-is-locked-open . make it true and false when you click appropriate buttons.

Check the following link. http://codepen.io/next1/pen/aNZYJb

Answer 2

You was looking for md-disable-backdrop

Example:

<md-sidenav 
class="md-sidenav-right" 
md-component-id="right" 
md-disable-backdrop> ... 
</md-sidenav>

Answer 3

You should add disableClose boolean property which decide whether the sidenav can be closed with the escape key or by clicking on the backdrop.

<mat-sidenav-container>
    <mat-sidenav disableClose>
      <div>Sidenav content</div>
    </mat-sidenav>
    <mat-sidenav-content>
      <div>Main content</div>
    </mat-sidenav-content>
  </mat-sidenav-container>