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.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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 ng serve 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
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


Run ng serve as usual.


this not work for me either

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(