CODEWITHSUNDEEP
javascriptcssangular
Scorpion_beardo
Scorpion_beardo

Reputation: 45

change Style sheet when different language is selected.

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.

Upvotes: 0

Views: 3225

Answers (2)

Daniel Inbaraj
Daniel Inbaraj

Reputation: 908

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

Upvotes: -1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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;
}

Upvotes: 3

Related Questions