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)
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.
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
}
