CODEWITHSUNDEEP
angularangular-material
Ibram Reda
Ibram Reda

Reputation: 2820

Sidebar isn't rendered correctly when the page direction changed to "RTL"

I play around with Angular Material trying to build multi-language website, the project has a simple layout with a toggleable sidebar and a content area see the code in action in Stackblitz

Markup and code:

<mat-drawer-container>
    <mat-drawer mode="side" [opened]="SideBareOpend">
        <button (click)="SideBareOpend=false"> close [X] </button>
    </mat-drawer>

    <mat-drawer-content>

        <button (click)="SideBareOpend=!SideBareOpend"> toggle side bare</button>
        <br>
        <button (click)="changeDir()"> change the direction of page </button>

    </mat-drawer-content>
</mat-drawer-container>

Everything is working fine when the page direction is "Left to right".

But when I try to change the page direction to "right to left" and open sidebar, the sidebar still pushes the content from the left and readers over the content from the right

What I need is to make the sidebar render from right, and also push the content from the Right if the direction is "RTL"

Upvotes: 2

Views: 647

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27303

material components comes with build in directinal Dir directive, which we can apply on any material components.

component.ts

public SideBareOpend: boolean = true;
  direction: Direction = "rtl";

  changeDir() {
    if (this.direction == "rtl") {
      this.direction = "ltr";
    } else {
      this.direction = "rtl";
    }
  }

component.html

<mat-drawer-container [dir]="direction">
    <mat-drawer mode="side" [opened]="SideBareOpend">
        <button (click)="SideBareOpend=false"> close [X] </button>
    </mat-drawer>
    <mat-drawer-content>
        <button (click)="SideBareOpend=!SideBareOpend"> toggle side bare</button>
        <br>
        <button (click)="changeDir()"> change the direction of page </button>
    </mat-drawer-content>
</mat-drawer-container>

Working Forked Example

Upvotes: 2

Related Questions