Angular4: Locale for a user
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 :-)
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 { }
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.