Metronic8 Angular demo1 dynamic RTL LTR switch at run time

can we home same for REACT

Here is the possible solution:

1. create <code>lltr.config.js</code> file (from copy of rtl.config.js) (comment <b>RtlCssPlugin</b> settings and for <code>MiniCssExtractPlugin</code> filename should be <code>'[name].ltr.css'</code>.
2. in rtl and ltr configs comment rows [12-15] (no need to remove the older folder.
3. in package json scripts add commands <code>"rtl": "webpack --config=rtl.config.js", "ltr": "webpack --config=ltr.config.js"</code>.
4. Comment everything <code>src/styles.scss</code> file comment everything
5. In any component you can have smth like this: <code>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 ); } } </code> 5) in the HTML of the component code can be next: <code> < link rel="stylesheet" [href]='getCSSURL()' > </code>

I've tried and it switches ltr => rtl and rtl => ltr in runtime.

Regards, Keenthemes support

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