Search code examples
angularjsangularjs-directiveangularjs-material

Angular material md-sidenav set md-is-open value based on screen size

i am trying to set md-is-open based on screen size. Something like $mdMedia('gt-sm'). For md-is-locked-open can be set with $mdMedia('gt-sm'), but don't know why md-is-open can't set with that. Currently my code look like: <md-sidenav md-is-open="$mdMedia('gt-sm')"></md-sidenav>

Solution

  • According to the docs, md-is-openattribute can be

    A model bound to whether the sidenav is opened.

    Hence, you can define a model in your controller and assign it to md-is-open attribute, such as

    // Controller
$scope.shouldLeftBeOpen = $mdMedia('gt-sm');

    And you can use it like

    <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-open="shouldLeftBeOpen"></md-sidenav>

    Here is a working codepen. When you load the page from a device whose width is less than 960px, sidenav won't be opened.