CODEWITHSUNDEEP
javascriptangularjsangular-material
Surya Prakash Tumma
Surya Prakash Tumma

Reputation: 2193

Getting Error in implementing $md-sidenav from angular material

I am trying to implement sidenav in my application. Below is my template.

<div class='dashboard' ng-controller="DashBoardCtrl">
  <div layout='row'>
    <div layout='column' flex='30'>
        <md-sidenav md-component-id="left" class="md-sidenav-left">
            Left Nav!
        </md-sidenav>
    </div>
    <div layout='column' flex='70'>
        {{test}}
    </div>
</div>

and my controller code is 

angular.module('common').controller('DashBoardCtrl', ['$scope', 'Constants',    '$mdSidenav', function($scope, Constant, $mdSidenav) {
     $scope.$emit('HideTools', { show: true });
     $mdSidenav('left').toggle();
     $scope.test = 'to test controller binded to view';
 }]);

When I try to run the app I am getting error SideNav 'left' is not available! Did you use md-component-id='left'?

I have used md-component-id='left' but still facing this issue. Kindly guide me in right way.

enter image description here

Upvotes: 2

Views: 2278

Answers (1)

camden_kid
camden_kid

Reputation: 12813

Here's one solution - CodePen

It looks like the md-sidenav is not available at the moment of the toggle() call. A $timeout allows for that to happen.

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <div layout='row'>
    <div layout='column' flex='30'>
      <md-sidenav md-component-id="left" class="md-sidenav-left">
        Left Nav!
      </md-sidenav>
    </div>
    <div layout='column' flex='70'>
      {{test}}
    </div>
</div>

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function($mdSidenav, $timeout) {
  $timeout(function () {
    $mdSidenav('left').toggle();
  });
});

Upvotes: 3

Related Questions