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>

You have check css. Look for "left: some value px; " value inside css. And then change it to "right: some value px;" — MontyGoldy, May 13 '18 at 02:24

score 54 · Accepted Answer · answered May 13 '18 at 06:52

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

score 0 · Answer 2 · edited Nov 04 '19 at 11:09

0

You can use input directive position="end" for opening from the right side in mat-drawer.

For instance:

<mat-drawer position="end">

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

edited Nov 04 '19 at 11:09

RobC

22,977
20
73
80

answered Nov 04 '19 at 10:46

Ahmer Shahid

107
1
4

score 0 · Answer 3 · answered Sep 25 '20 at 03:42

0

I have tried adding position="end" to make it work but it didn't.

For any lost desperate souls, try adding style.position="absolute" and set your .sidenav to have left: calc(100% - 200px);

answered Sep 25 '20 at 03:42

taylorswiftfan

1,371
21
35

1

Mb. put attribute position="end" into tag instead of ...? – Petr Mar 13 '22 at 19:20

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

3 Answers3