Angular Material Tab control - RTL

Question

When applying RTL direction to Angualr Material Tabs control, the animation breaks when toggling between tabs.

<div dir="rtl">
  <mat-tab-group>
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
  </mat-tab-group>
</div>

Is there a known fix to this ?

reproduce demo

Answer 1

you need to put dir in mat-tab-group itself and container must be ltr

<div dir="ltr">
  <mat-tab-group  dir="rtl">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
  </mat-tab-group>
</div>

Answer 2

This is a bug probably, But you can fix it with this workaround for now. set some css in your page:

.mat-tab-header{
direction:rtl;
}
.mat-tab-body-wrapper{
text-align:right
}

Working Demo