Metronic8 Angular demo1 dynamic RTL LTR switch at run time

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 ?

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

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

Hi,

I try this way but the problem is I lose the imports that I include in angular.json file like import of indigo-pink.css material theme and throw an error that it can't find the material core theme and also sweetalert2 too and I'm trying to import those packages in style.rtl.css that generated by the webpack but I can't import them in the runtime because the scope of import is limited to assets folder not above it, is there any way to preserve the imports or import them in style.rtl.css and work ?

Hi,

Not sure how to help you with your custom request,
Anyway, will try to research your case by the end of the week (can't promise anything, but will try to implement it).

Regards,
Keenthemes support

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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(