Search code examples
angularangular-materialangular-material2

Material 2 - md-sidenav not opening from right to left

I want the side navigation to open from right to left. I used the align property and set it to "rtl" but it is not working. 

<md-sidenav-container class="example-container">
  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>
  <md-sidenav align="rtl" #sidenav class="example-sidenav">
    Jolly good!
  </md-sidenav>
</md-sidenav-container>

Link: https://material.angular.io/components/sidenav/overview

Solution

  • align takes 'start' or 'end' as values. Change your html t0:

    <md-sidenav align="end" #sidenav class="example-sidenav">
    Jolly good!
</md-sidenav>

    PLUNKER DEMO HERE