0

I have a angular 6 application which supports standard Left to write content. I need arabic support so I did some research and got to know about Bootsrap RTL. I need to know if it is possible to reload the whole style.scss file on selecting a language in home page . If I select Arabic then RTL should be loaded or else LTR be default. Thank you in advance.

Scorpion_beardo
  • 45
  • 1
  • 8
  • 1
    [Remove old stylesheet](https://stackoverflow.com/questions/5033650/how-to-dynamically-remove-a-stylesheet-from-the-current-page) [Add new stylesheet](https://stackoverflow.com/questions/18510347/dynamically-load-stylesheets) – subhasis Oct 08 '18 at 12:32
  • 1
    Just change the `href` of your ``. –  Oct 08 '18 at 12:33

2 Answers2

3

You could change the lang attribute of the root element (<html>) via JS and set in css the rtl direction based on that attribute, so there's no need to load another resource, e.g.

JS (switch language)

document.documentElement.setAttribute('lang', 'ar');

CSS

body { 
   direction: ltr;
}

[lang="ar"] body {
   direction: rtl;
}
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
-1

Natively browser supports dir attribute to div elements, so you could do the direction to be modified via an dir attribute.

<div dir="ltr">Hello World. This gets displayed from left to right</div>
<div dir="rtl">Hello World. This gets displayed from right to left</div>

Pass the dynamic variable from ts file for angular application,

<div dir="[direction]"></div>

set the direction value to ltr/rtl based on the configuration from angular application

Daniel Inbaraj
  • 778
  • 8
  • 9