I am working on an Angular2 app, which has multiple languages. Depending on the cookies that are sent with my angular2 template request, I get different language templates from the server. The problem is that when I change the language in Angular, it does not reload the @Component HTML-s, which means that I am not getting the translated page templates.
Example
Working in EN, I have a template
<p>Hello: @{{ user.name }}</p>
When I change my language in Angular, I have to reload the component HTML to get (for example) the German translation template.
<p>Guten tag: @{{ user.name }}</p>
Any suggestions on, which class I have to use to do this? I figure it has to be easier than refreshing the whole page?
I am currently just doing a
location.reload();
after changing the language, but I cannot figure out a better solution.
Angular2 is planning to adopt localization by default in the future. But, for now, why don't you use ng2-translate to translate things?
It's easy to set up and you can easily translate terms using pipes:
{{ 'HELLO' | translate}}
Then, you just create localization files inside your i18n folders with all translations you need (e.g. en.json, de.json, etc.).
Look at this Plunker for a simple working example.