Angular 2+ localization (i18n) rtl support

Question

What is the best practice for adding right to left (rtl) support into a localized Angular 2+ app (e.g. for Hebrew and Arabic languages)? I looked through several tutorials i

Answer 1

It is possible to add i18n-dir as described in the docs. So, the best approach I found so far is to add i18n-dir dir="ltr" (where ltr is a default direction) to the root element in the the root component template (e.g. app.component.html) like so:

Once you generate translation files a corresponding trans-unit will appear in each of them with source containing default direction, which is ltr in this case. So, you just need to set the target of the unit to rtl for corresponding languages.