If you have an existing angular application, that already have localization working (i.e text load in different languages) if one of those is RTL direction (Hebrew/Arabic etc) how would you go about writing the code for that?
Remember it's not enough to change the dir="rtl" on those warpper/html. For example elements in nav bar have to be mirrored and floated to right. Popover (when you hover elements) need to change direction and so the list goes on.
Approaches tested for accommodating RTL:
1.
Setting text direction BEFORE we load the app in our app-load module (Using app_initializer)
In that function we can set the dir attribute on the HTML and lang Based on the user's local language
Later when we bootstrap our angular application we can look into that html attribute
This (1) I like and want to keep doing.
2.
Using only css/less/sass to change the looks of the site after we have 1 working
Those styles (as we want) will only get applied for languages with rtl direction
But when we tried to rotate (mirror) nav links (in header) and change popover directions things got very tricky. The order of elements in the html as well as the styles need to change, and for some components the changes were significant, therefore we tried approach number 3. We can still leverage using this approach with the next ones (combine them) so this is still useful.
On more specifics what didn’t work with less was the use of dispaly: flex on a wrapper elements With combination of :nth-child(i) Selectors with order: j; To rotate elemenst in nav bar Only things like float: right were successful
Also tested some -webkit-transform: scaleY(-1); With combination of display:inline-block;
3.
If we could have a simple way to dictate which templateUrl we load into the components
We could then have for A.compoenent one a.html template (default ltr direction) and another
A-rtl.html based on a condition.
See fore ref:
Angular 2 dynamic template url with string variable?
Essentially splitting the templates into 2 but the HUGE benefit would be that we can have the .ts code once
This will be greatt but I can't get this to work.
Even if it’s possible it seems that it will prevent AOT compilation. (or not?)
See for ref: (old post but still relevant)
https://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/
The angular official documentation approach https://angular.io/guide/dynamic-component-loader
This is working! The issue is that this isn’t exactly what we want. In this approach we load separate COMPONENTS into a placeHolder and not separate TEMPLATES
4.
This approach is to use *ngIf on the template wrapping our ltr (current template) with And adding a seperate one below it with
There will be some duplication in this case, but this isn’t really code (it’s HTML) it’s simply markup, plus like this we have much more control on how things look and where, and if we need to use for example popover-rtl component instead of the current popover (which again isn’t currently compatible with RTL) we can EASILY do so.
In this approach there are several simple approaches to determine for every component if we are on ltr or rtl text direction (for the ngIf) In short is using a baseComponent, or a service.
Note: both approaches 3,4 can use what we did in 1 and 2.
Any suggestion on how to get approach 3 working?
Ideally I can get a condition to determine which templateUrl I should load for the component so the the code in .ts is there for both and only markup is different.
Please suggest on Annular 6+ version if possible.
P.S been using this site for over 10 years almost every day and that is my first questions, thumb me up please :)
Thanks!
