How can I set Angular 6 Material sidenav to open right to left from the right side of the screen

Question

This is the code example being used in angular Material for Sidenav. Im using this very same example on my page. However, I could find any instructions how to open the sidenav from left to right from the right side of the screen. Anybody knows how to ?

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
               (closed)="events.push('close!')">
    Sidenav content
  </mat-sidenav>

  <mat-sidenav-content>
    <p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p>
    <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
    <p>Events:</p>
    <div class="example-events">
      <div *ngFor="let e of events">{{e}}</div>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

If you look to the API tab there is an input directive position for you to define.

position: 'start' | 'end'

The side that the drawer is attached to.

<mat-drawer-container class="example-container">
  <mat-drawer #sideNav mode="side" opened="true" position="end">
    Right drawer
  </mat-drawer>
  <mat-drawer-content>
    Main content
  </mat-drawer-content>
</mat-drawer-container>

DEMO