CODEWITHSUNDEEP
htmlcsstypescriptangular-materialangular6
Carl.G
Carl.G

Reputation: 309

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

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>

Upvotes: 28

Views: 53906

Answers (3)

taylorswiftfan
taylorswiftfan

Reputation: 1517

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);

Upvotes: 0

Ahmer Shahid
Ahmer Shahid

Reputation: 127

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

Upvotes: 1

Shift &#39;n Tab
Shift &#39;n Tab

Reputation: 9443

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

Upvotes: 65

Related Questions