Angular RTL Support
Hi.
I cant understand what is the process of using RTL version and angular.
In the Angular project, you have docs with rtl folder which is empty!
It seems that the rtl guide is only for the HTML version.
Replies (9)
Hi,
At the moment, RTL for Angular does not officially available yet. We will consider adding it in future updates.
But as a workaround, you can get the RTL CSS files from the HTML version.
Copy RTL CSS file from the HTML version from
/metronic_v8.0.34/html/theme/demo1/dist/assets/css/style.bundle.rtl.css
to the Angular folder demo1/src/assets/sass/
Open the Angular file demo1/src/styles.scss, replace the scss file path with
@import "./assets/sass/style.bundle.rtl.css";Open demo1/src/index.html in Angular and replace it with this
<html direction="rtl" dir="rtl" >Run <b>ng serve</b> as usual.
You should get the RTL version of Angular.
Thanks
Hi Mr. Faizal
I did exactly what you said but it did not work perfectly, this is a lot of problem with the RTL design in the angular version
Hi Mihyar,
It can be a starter for the Angular RTL version. We will fix it in future updates. Could you please share the screenshot of the issue?
Thanks
First of all thanks for the quick reply, second of all the problem was that I did not remove the old css so there was an overwrite on the RTL css file since I removed the old one it worked perfectly.
Thank you.
Hi Mihyar,
Glad it worked. Yes, you have to remove the existing SCSS file import.
@import "./assets/sass/style";Thanks
One other question if it's not so much trouble, How can I Implement the RTL when I change the language
Hi faizal
Hope you are doing well,
This solution works when you set manual <html direction="rtl" dir="rtl" >
But this can't be a good solution if i want to switch language then change to rtl in angular
So please we need more specific solution
Hi Majed,
Current approach, the SCSS file is loaded as hardcoded in the /src/styles.scss and loaded via angular.json. We cant add the "if" conditions in the SCSS file. At the moment, there is no way for the lazy load SCSS file.
You can check here for the lazy load style. Lazy load CSS can make the style load with the "if" condition in the typescript file.
https://juristr.com/blog/2019/08/dynamically-load-css-angular-cli/
Thanks
No problem
but i have problem when do like you said
Hi,
At the moment, RTL for Angular does not officially available yet. We will consider adding it in future updates.
But as a workaround, you can get the RTL CSS files from the HTML version.
Copy RTL CSS file from the HTML version from
/metronic_v8.0.34/html/theme/demo1/dist/assets/css/style.bundle.rtl.css
to the Angular folder demo1/src/assets/sass/
Open the Angular file demo1/src/styles.scss, replace the scss file path with
@import "./assets/sass/style.bundle.rtl.css";
Open demo1/src/index.html in Angular and replace it with this
<html direction="rtl" dir="rtl" >
Run ng serve as usual.
this not work for me either
