If you're looking to dynamically switch between right-to-left (RTL) and left-to-right (LTR) layouts in an Angular application based on the language selected by the user, you can achieve this by using Angular's internationalization (i18n) features along with CSS classes or Angular directives retro bowl

There are several JavaScript libraries available to help you manage the conversion between RTL and LTR more easily. For example, the rtl-detect library can detect the language and automatically apply the necessary adjustments. suika

can we home same for REACT

Here is the possible solution:
1) create lltr.config.js file (from copy of rtl.config.js) (comment <b>RtlCssPlugin</b> 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

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