Angular2 i18n language switch

Question

I'm looking for a way to

• set dynamically the current language to be displayed: I have followed the latest angular cookbook here about internationalization but it says "the user's language is hardcoded as a global document.locale variable in the index.html"

How can this be set dynamically in angular2 + typescript ?

Here is my attempt from the official Angular2 plunkr : https://plnkr.co/edit/lWV4VhzpWYnCXeDBpzsn?p=preview where I've commented out the

document.locale='en';

and tried to retrieve the window.document inside a typescript service, and change the locale there, but despite it is called and the locale set properly (seen in the console), the interface is not displayed in the chosen language at startup.

Then of course the dropdown buttons don't work either because the same erroneous way is used and the display is not refreshed but that is the next step.

Solution

I am saving user selected language key into local storage:

//<select name="selectLocate" (change)="onChange($event.target.value)">
 public onChange(localeId: string): void {
    localStorage.setItem('localeId', localeId);
    location.reload(true);
  }

Then force reloading, and in i18n.provider.ts

let locale = localStorage.getItem('localeId');

Comments

[Loic T]

simple and great. I have changed the plunkr example and it works fine! plnkr.co/edit/JyE4l4TjEruuPsrbanmK

[Coder Guru]

I am not using systemsjs. Is it possible to configure it using webpack ?

[Tienou]

@sardarCoder Don't know if you are still struggling with this, but if so. Yes you can: Just use the raw-loader to load xlf-files: {test: /\.xlf/, loader: 'raw-loader'},

[titusfx]

@GOB raw-loader is a loader for webpack that lets you import files as a string. So?

[Makarov Sergey]

What if I get settings on an app load and it contains the language I should use? I need the way to apply it wothout a page reload (don't want to get settings twice).

[mohammad mahmoodi]

hi guys i have some error like this Argument of type '{ providers: Object[]; }' is not assignable to parameter of type '(CompilerOptions & BootstrapOptions) | (CompilerOptions & BootstrapOptions)[]'. Type '{ providers: Object[]; }' is not assignable to type '(CompilerOptions & BootstrapOptions)[]'. Property 'includes' is missing in type '{ providers: Object[]; }' can u tel me how can i fix this error my guide is plnkr.co/edit/JyE4l4TjEruuPsrbanmK