Angular 13 dynamic locale change

Question

To localize my Angular 13 application I followed the official guide: https://angular.io/guide/i18n-example , created *.xlf files with translations, everything seams to work fine so far.

Now, I wonder if it's possible to dynamically change current display language (current locale and translations) without re-compiling and reloading the Angular application, keeping the same Url address . For example, I'd like to have a combobox in the component and when user selects a different language, dynamically change UI display language for the entire site. Is this possible using the default i18n Angular 13 functionality? Should I use ngx-translate instead of the default one? What are the pros and cons?

Answer 1

possible solutions with i18n (u will need reload page 100% at this time angualr i18n can't update displayed data in runtime):

1. use some subdomain like en.domain.com & fr.domain.com and when language changed navigate user
2. use some prefix (like in first) domain.com/en OR domain.com/fr
3. using localStorage (or other storage) for storing selected language

with using ngx-translate u can saw actually language when it changed (runtime updated)