Change to RTL when select language in Metronic 8 angular
when i select arabic and add import
./assets/sass/style.angular.scss
./assets/css/style.rtl.css
to index.html
style appear correct but when select english and add import
./assets/sass/style.scss
./assets/sass/plugins.scss
to index.html
style has problem and not work correct
please can you help me?can i change import style by index.html for change project to rtl or ltr by select language
Replies (3)
Hi Amina,
Please note the following:
After selecting the language and adding the relevant style imports to index.html, it's essential to refresh the page. CSS styles typically cannot update the entire page without a refresh.
Changing the language or direction (RTL or LTR) often involves applying different styles and layout rules. These changes might not take effect immediately in a dynamic web application without a page reload.
So, to ensure that your styles work correctly after selecting a language or changing the direction of your project, perform a page refresh to apply the new styles.
This is the general code to show how it works:
constructor(
private router: Router,
private location: Location,
private yourLanguageService: LanguageService
) {
this.selectedLanguage = yourLanguageService.getLanguage();
}
onLanguageChange() {
this.languageService.setLanguage(this.selectedLanguage);
const currentUrl = this.router.url;
this.location.replaceState(currentUrl); // Update the URL without a page reload
location.reload(); // Reload the page to apply new language settings
}Thanks
Of course, I am doing a refresh, but I mean that import style scss in index.html does not work
When the language is Arabic, I want to import two files in index.html
<link rel="stylesheet" href=./assets/css/style.rtl.css">
<link rel="stylesheet" href=./assets/sass/style.angular.scss">When the language is English, I want to import two files
<link rel="stylesheet" href=./assets/sass/style.scss">
<link rel="stylesheet" href=./assets/sass/plugins.scss">When I choose the English language, the style is correct, but when I choose the Arabic language, it appears incorrectly
this function set language in language service
setLanguage(lang: string) {
this.translate.use(this.translate.getDefaultLang());
this.translate.use(lang);
localStorage.setItem(LOCALIZATION_LOCAL_STORAGE_KEY, lang);
if (lang == "ar") {
document.dir = "rtl";
const temp = document.createElement("link");
temp.innerHTML = "<link rel="stylesheet" href="./assets/css/style.rtl.css">";
temp.innerHTML = "<link rel="stylesheet" "./assets/sass/style.angular.scss">";
const head = document.head;
while (temp.firstChild) {
head.appendChild(temp.firstChild);
}
} else {
document.dir = "ltr";
const temp = document.createElement("link");
temp.innerHTML = "<link rel="stylesheet" href="./assets/sass/style.scss">"
temp.innerHTML = "<link rel="stylesheet" href="./assets/sass/plugins.scss">"
;
const head = document.head;
while (temp.firstChild) {
head.appendChild(temp.firstChild);
}
}
}this function onLanguageChange in app component
ngOnInit() {
this.modeService.init();
console.log("this select lang is ", this.selectedLanguage);
}
onLanguageChange() {
this.translationService.setLanguage(this.selectedLanguage);
const currentUrl = this.router.url;
this.location.replaceState(currentUrl); // Update the URL without a page reload
location.reload(); // Reload the page to apply new language settings
}The issue you're facing could be due to how you are creating and adding the <link> elements in your DOM.
You can modify your setLanguage function to handle the stylesheet loading for different languages like this:
https://gist.github.com/KeenthemesHub/92dc4c3edad30e7888e58b7fc25bdc50
This modified code will remove any existing stylesheets and then load the appropriate stylesheets based on the selected language.
Make sure you have a route configuration that handles the lang query parameter and updates the language accordingly.
