Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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 ,

G
Guest 4 years ago
Angular RTL
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Faizal Author 4 years ago

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(