CODEWITHSUNDEEP
angularright-to-leftangular-material2
Soheil Alizadeh
Soheil Alizadeh

Reputation: 3066

How To Change Angular Material 2 direction To RTL

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

Upvotes: 19

Views: 23562

Answers (5)

Rafi Henig
Rafi Henig

Reputation: 6424

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">

Upvotes: 1

itay oded
itay oded

Reputation: 1040

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

https://github.com/10bis/ngx-bdir

Upvotes: 1

Rzassar
Rzassar

Reputation: 2282

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

Upvotes: 3

Mhd Wael Jazmati
Mhd Wael Jazmati

Reputation: 667

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

Upvotes: 14

Milad
Milad

Reputation: 28592

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>

Upvotes: 28

Related Questions