In Angular 7 how to load CSS of Arabic language (RTL) from English language (LTR)

Question

I am developing an application in Angular 7 using ngx-translate for internationalization and bootstrap based AdminLTE 3. I have two css:

1. One for LTR based languages
2. another for RTL based languages.

When I select Arabic language which is a RTL direction, how to load the bootstrap_rtl.css and unload the bootstrap_ltr.css.

<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
    <a class="dropdown-item" (click)="useLanguage('en')">
      English
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" (click)="useLanguage('ar')">
      Arabic
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" (click)="useLanguage('ta')">
      Russian
    </a>
</div>

export class NavbarComponent implements OnInit {
  constructor(private translate: TranslateService) { }
  ngOnInit() {
  }

  useLanguage(language: string) {
    this.translate.use(language);
  }
}

Answer 1

you can create a key in the translation file as flage of the current theme if it's rtl or ltr and this value will change base of the language that you have select

style.scss

.ltr {
  @import 'themes/_en';
}

.rtl {
    @import 'themes/_ar';
}

_ar.json

{
  "currentTheme":"rtl"
}

_en.json

{
  "currentTheme":"ltr"
}

app.template

<div  [ngClass]="'currentTheme' | translate">  // 👈
{{'currentTheme' | translate}}
<p class="base-align">
<hello name="{{ name }}"></hello>
  Start editing to see some magic happen :)
</p>

theme <button (click)="useLanguage('en')">English</button>
<button (click)="useLanguage('ar')">Arabic</button>
</div>

when the languae change the value of currentTheme will chnage and the style will change

stackblitz demo 🚀