Angular RTL Conversion

Hi !
Can you please share procedure to convert Metronic 8 Angular into RTL.

I tried to follow these steps
https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/rtl.html

But it didn't help

1. Do I need to convert every scss file into RTL ? (Scss is dived into multiple files (around 50), how to get RTL version for every file?)

2. How will I get RTL scss files?

3. Left Side Bar Menu should also move to Right Side in RTL ,

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 (1)

Hi Hany,

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 do this.

Copy RTL CSS file from the HTML version from
/metronic_v8.0.x/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

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  :(