8

I want to have a LoginForm and after this user enters the application - either with German or English usage. As far as I understand I can set in the app.module.ts something like 

import { LOCALE_ID } from '@angular/core';
providers: [{ provide: LOCALE_ID, useValue: 'de-DE' },...]

But that is at the startup and not when the LoginForm was already displayed :-/ Is there a way to change the locale for the whole app? (Not only for a specific component!) - Would be great if the translations could be changed as well on the fly. Any hints how to achieve? I only found the above way to deal with.

LeO
  • 4,238
  • 4
  • 48
  • 88

3 Answers3

13

I followed the answer from this thread and I have the following solution:

import { LOCALE_ID } from '@angular/core';

@NgModule({
  // ...
  providers: [...
     {provide: LOCALE_ID,
      deps: [SettingsService],      // some service handling global settings
      useFactory: getLanguage  // returns locale string
    }
  ]
  // ...
})
export class AppModule { }
// the following function is required (for Angular 4.1.1!!!)
export function getLanguage(settingsService: SettingsService) {
  return settingsService.getLanguage();
}

Note: The usage of an extra function prevents the error Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function !!!!

and I create the class 

import { Injectable } from '@angular/core';

@Injectable()
export class SettingsService {
  currentLang: string;

  constructor() {
    this.currentLang = 'en';
  }

  setLanguage(lang: string) {
    this.currentLang = lang;
  }
  getLanguage() {
    return this.currentLang;
  }
}

which changes the LOCALE_ID on the fly :-)

Lee Goddard
  • 10,680
  • 4
  • 46
  • 63
LeO
  • 4,238
  • 4
  • 48
  • 88
  • It doesn't work for the date Pipe, the months in MMM format stays in the default lang. – Romain Jun 23 '17 at 15:12
  • Sorry the late reply - but this works on my side, e.g. `{curDate|date:'medium'}} <--> {{curDate| date:'MMM' }} <--> {{curDate| date:'MMMM' }} <-->` works perfectly ... don't know where/how you perceive the prob... – LeO Jul 05 '17 at 13:59
  • 2
    Whenever I change the current language, while all the `| translate` update correctly, the months in `| date` won't update – Romain Jul 11 '17 at 12:06
  • read the documentation, they've made `date` immutable to save on calculations, you should change the reference (create new `date` I guess) so it will trigger the change (haven't tried this yet) – Azder Oct 24 '17 at 23:19
2

How about this?

  • use local storage to store the locale (eg. 'fr')
  • load the associated translation file in main.ts (eg. messages.fr.xlf)
  • set the LOCALE_ID in app.module.ts

To change the locale

  • set the new locale in local storage
  • refresh the app

main.ts

declare const require;

const locale = localStorage.getItem('locale');
const translation = require(`raw-loader!./locale/messages.${locale}.xlf`)

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    {provide: TRANSLATIONS, useValue: translation},
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'}
  ]
});

app.module.ts

@NgModule({
  providers: [
    {provide: LOCALE_ID, useValue: localStorage.getItem('locale')}
  ]
})
export class AppModule { }
yohosuff
  • 1,359
  • 1
  • 11
  • 19
1

What you're doing in app.module.ts is the right way to do this and for the whole app:

@NgModule({
  // ...
  providers: [
    { provide: LOCALE_ID, useValue: 'de-DE'}
  ]
  // ...
})
export class AppModule { }

But unfortunately I don't think that it's possible to change it on the fly.

rmnng
  • 59
  • 7