All geek questions in one place

How to Change Angular Material 2 Directions In RTL

I want to Create an RTL Template with Angular Material 2 But, I do not know how to do this? Please help me;

+10
source share
5 answers

You should use rtl as an attribute

dir='rtl'

Here is the plunker

Go to index.html, you will find:

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

you must add the attribute dir=rtlin <html>, because the angular material.js code is using this document.dirto differentiate the direction of the layout

+8
source

-, ( Universal selector) styles.css.

* {
    direction: rtl;
  }
+1

I published a library that works well with a bidirectional solution using scssmixins. Check this:

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

+1
source

Angular Material uses a selector [dir=rtl]for some elements in its CSS, for example:

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

There you need to add an attribute dir=rtlto your tag html:

<html dir="rtl">
0
source

Source: https://habr.com/ru/post/1664754/

More articles:


All Articles