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

• 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

2 Answers 2

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