javascript - How I change the dir from LTR to RTL in ionic 4 programmatically - Stack Overflow

admin管理员组

文章数量:1023213

I am working on ionic 4 multi-language app English and Arabic so I need when the user switching between langs the layout change!

I was doing this in ionic 3 by platform.setDir('rtl') at onChangLang event

    if (languageId === 'ar') {
      this.platform.setDir('rtl', true);
      this.translate.setDefaultLang(languageId);

    } else {
      this.platform.setDir('ltr', true);
      this.translate.setDefaultLang(languageId);
    }

But now in ionic 4 platform.setDir() has been deprecated ( removed ) for whatever reasons and the documentation doesn't include any replacement for platform.setDir() or how to change the dir programmatically!!

So my Question is how to change the layout direction programmatically using typescript like it was on ionic 3?!!

I am working on ionic 4 multi-language app English and Arabic so I need when the user switching between langs the layout change!

I was doing this in ionic 3 by platform.setDir('rtl') at onChangLang event

    if (languageId === 'ar') {
      this.platform.setDir('rtl', true);
      this.translate.setDefaultLang(languageId);

    } else {
      this.platform.setDir('ltr', true);
      this.translate.setDefaultLang(languageId);
    }

But now in ionic 4 platform.setDir() has been deprecated ( removed ) for whatever reasons and the documentation doesn't include any replacement for platform.setDir() or how to change the dir programmatically!!

So my Question is how to change the layout direction programmatically using typescript like it was on ionic 3?!!

• javascript
• angular
• ionic-framework
• ionic4

Share Improve this question Follow asked Jan 30, 2019 at 8:05 hesham shawkyhesham shawky 1,15166 gold badges2222 silver badges4848 bronze badges 2

• cant you use two separate CSS file for English and Arabic – Nifal Nizar Commented Jan 30, 2019 at 10:10
• Not an efficient solution a lot of RTL issues/conflicts happened when trying doing this! like the solution down there using JS Dom document.documentElement.dir = 'rtl'; – hesham shawky Commented Jan 30, 2019 at 20:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can use document.documentElement.dir = "rtl";

if (languageId === 'ar') {
  document.documentElement.dir = "rtl";
  this.translate.setDefaultLang(languageId);

} else {
  document.documentElement.dir = "ltr";
  this.translate.setDefaultLang(languageId);
}

I think you'll find the answer here -- it worked for me. The author references a Mozilla/MDN link, and creates an Angular Service to reference the DOCUMENT and flip from 'ltr' to 'rtl'. Rather than copy that answer take a look at the links included in this post

I am working on ionic 4 multi-language app English and Arabic so I need when the user switching between langs the layout change!

I was doing this in ionic 3 by platform.setDir('rtl') at onChangLang event

    if (languageId === 'ar') {
      this.platform.setDir('rtl', true);
      this.translate.setDefaultLang(languageId);

    } else {
      this.platform.setDir('ltr', true);
      this.translate.setDefaultLang(languageId);
    }

But now in ionic 4 platform.setDir() has been deprecated ( removed ) for whatever reasons and the documentation doesn't include any replacement for platform.setDir() or how to change the dir programmatically!!

So my Question is how to change the layout direction programmatically using typescript like it was on ionic 3?!!

I am working on ionic 4 multi-language app English and Arabic so I need when the user switching between langs the layout change!

I was doing this in ionic 3 by platform.setDir('rtl') at onChangLang event

    if (languageId === 'ar') {
      this.platform.setDir('rtl', true);
      this.translate.setDefaultLang(languageId);

    } else {
      this.platform.setDir('ltr', true);
      this.translate.setDefaultLang(languageId);
    }

But now in ionic 4 platform.setDir() has been deprecated ( removed ) for whatever reasons and the documentation doesn't include any replacement for platform.setDir() or how to change the dir programmatically!!

So my Question is how to change the layout direction programmatically using typescript like it was on ionic 3?!!

• javascript
• angular
• ionic-framework
• ionic4

Share Improve this question Follow asked Jan 30, 2019 at 8:05 hesham shawkyhesham shawky 1,15166 gold badges2222 silver badges4848 bronze badges 2

• cant you use two separate CSS file for English and Arabic – Nifal Nizar Commented Jan 30, 2019 at 10:10
• Not an efficient solution a lot of RTL issues/conflicts happened when trying doing this! like the solution down there using JS Dom document.documentElement.dir = 'rtl'; – hesham shawky Commented Jan 30, 2019 at 20:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can use document.documentElement.dir = "rtl";

if (languageId === 'ar') {
  document.documentElement.dir = "rtl";
  this.translate.setDefaultLang(languageId);

} else {
  document.documentElement.dir = "ltr";
  this.translate.setDefaultLang(languageId);
}

I think you'll find the answer here -- it worked for me. The author references a Mozilla/MDN link, and creates an Angular Service to reference the DOCUMENT and flip from 'ltr' to 'rtl'. Rather than copy that answer take a look at the links included in this post

本文标签： javascriptHow I change the dir from LTR to RTL in ionic 4 programmaticallyStack Overflow