Menu
I Want Create RTL Template With Angular Material 2 But، I do not know How To Do This Work? Please Help Me;
504
Right To Left (RTL) can be enabled for Syncfusion Angular UI components by calling enableRtl with true . This will render all the Syncfusion Angular UI components in right to left direction. We can enable the feature by setting the property enableRtl value as true.
Layout Directiverow − Items are arranged horizontally with max-height = 100% and max-width is the width of the items in the container. column − Items are arranged vertically with max-width = 100% and max-height is the height of the items in the container.
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>
you should add attribute dir=rtl to <html> tag, Because angular material.js code using this document.dir to distinguish layout direction
21
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;
}
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
28
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
