Angular Material - Side Nav - angular-material

Question

I am using Angular Material's sidenav. I have opened the sidenav dynamically. The panel is appearing with a backdrop. User can click on the backdrop to close the sidenav. What I need is to disable closing of sidenav on clicking of backdrop. Can you help me with this?

Answer 1

Here you go - CodePen
The trick is to access the backdrop element and disable pointer events on it.
Markup
<div ng-controller="AppCtrl" layout="column" style="height:500px;" ng-cloak="" class="sidenavdemoBasicUsage" ng-app="MyApp">
<section id="section" layout="row" flex="">
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<div>
<md-button ng-click="toggleRight()" ng-hide="isOpenRight($event)" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
<md-content ng-controller="RightCtrl" layout-padding="">
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>
</md-sidenav>
</section>
</div>
JS
angular
.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function ($scope, $timeout, $mdSidenav, $log, $element) {
var section,
backdrop;
$scope.toggleRight = function() {
$mdSidenav('right')
.toggle()
.then(function () {
$log.debug("toggle right is done");
// Disable pointer events on backdrop
section = angular.element($element[0].querySelector('#section'));
backdrop = section[0].children[0];
backdrop.style.pointerEvents = 'none';
});
}
})
.controller('RightCtrl', function ($scope, $timeout, $mdSidenav, $log) {
$scope.close = function () {
$mdSidenav('right').close()
.then(function () {
$log.debug("close RIGHT is done");
});
};
});