How I change the dir from LTR to RTL in ionic 4 programmatically

Question

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?!!

Answer 1

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);
}

Answer 2

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