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 including Internationalization (i18n) but none seem to be covering that. I would expect, for example, the html direction property (e.g. <html dir="rtl">) to be added along with translations defined in 18n attributes at the build step of the app.
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:
<div i18n-dir dir="ltr">
<!-- The rest of the content -->
</div>
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.