Metronic8 Angular demo1 dynamic RTL LTR switch at run time

Question

Hello,

I read your documentation about RTL version of angular demo1 but it seems i can't make a switch from rtl to ltr at run time depending on language (Arabic language) is there any solution or work around to make this happened ?

Carmelo · Answer

Hi,

Maybe you can generate LRT and import both styles (RTL/LRT) together and somehow switch it, it can be a possible solution. 

Regards,
Keenthemes support

Carmelo · Answer

Here is the possible solution:
1) create lltr.config.js file (from copy of rtl.config.js) (comment RtlCssPlugin settings and for MiniCssExtractPlugin filename should be '[name].ltr.css'.
2) in rtl and ltr configs comment rows [12-15] (no need to remove the older folder.
3) in package json scripts add commands "rtl": "webpack --config=rtl.config.js",
 "ltr": "webpack --config=ltr.config.js". 
3) Comment everything src/styles.scss file comment everything
4) In any component you can have smth like this: import {
 ChangeDetectionStrategy,
 ChangeDetectorRef,
 Component,
 OnInit,
} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({

 selector: 'your-component',
 templateUrl: './your.component.html',
 styleUrls: ['./your.component.scss'],
 changeDetection: ChangeDetectionStrategy.OnPush,
})
export class YourComponent {
 direction: 'rtl' | 'ltr' = 'ltr';

 constructor(private cd: ChangeDetectorRef, private sanitizer: DomSanitizer) {}

 setDirection(_direction: 'rtl' | 'ltr') {
 this.direction = _direction;
 this.cd.detectChanges();
 }

 getCSSURL() {
 return this.sanitizer.bypassSecurityTrustResourceUrl(
 `/assets/css/style.${this.direction}.css`
 );
 }
}

5) in the HTML of the component code can be next: 
 < link rel="stylesheet" [href]='getCSSURL()' >


I've tried and it switches ltr => rtl and rtl => ltr in runtime.

Regards,
Keenthemes support

Afif · Answer

can we home same for REACT

Metronic8 Angular demo1 dynamic RTL LTR switch at run time

Replies (5)

Metronic

ReUI

Products

Legal

Stay Connected