How To Change Angular Material 2 direction To RTL

22.9k Views Asked by Soheil Alizadeh At 24 December 2016 at 10:13

I Want Create RTL Template With Angular Material 2 But، I do not know How To Do This Work? Please Help Me;

There are 5 best solutions below

Milad On 24 December 2016 at 11:24 BEST ANSWER

You should use rtl as attribute

dir='rtl'

Here is a plunker

Go to index.html , you'll find :

<body >
   <chips-overview-example dir="rtl">Loading Material Docs example...</chips-overview-example>
</body>

Mhd Wael Jazmati On 05 September 2017 at 20:50

you should add attribute dir=rtl to <html> tag, Because angular material.js code using this document.dir to distinguish layout direction

Rzassar On 04 March 2018 at 17:23

if you wish to change All element's directions in website, Use the following style (called Universal selector) in your styles.css file.

* {
    direction: rtl;
  }

itay oded On 16 June 2019 at 12:19

I have published a library that works well with material bi-direction solution by using scss mixins check it out:

Rafi Henig On 20 October 2019 at 14:05

Angular material uses the selector[dir=rtl] for some elements in its css, for example:

[dir=rtl] .mat-form-field {
   text-align: right;
}

Therefore consider adding dir=rtl attribute to your html tag:

<html dir="rtl">