fmd-i18n-manager

i18n Manager for Angular created by Fusion MD Network inc.

fmd-i18n-manager is a simple i18n JSON files manager for Angular.

Install

$npm i -g npm
$npm i --save fmd-18n-manager

Usage

Import the service and pipe in the app component

import { FmdI18nManagerService, FmdI18nManagerPipe } from 'fmd-i18n-manager';

Include the pipe as a provider in the app component

@Component({
  ...
  providers: [ FmdI18nManagerPipe ]
})

Import module in app

import { FmdI18nManagerModule } from 'fmd-i18n-manager';
...
@NgModule({
  ...
  imports: [
    ...
    FmdI18nManagerModule
  ]
  ...
})

Import your .json file

import * as i18n_data from '../i18n.json';

Start the service in the constructor or ngOnInit

const i18nManager: FmdI18nManagerService = new FmdI18nManagerService(i18n_data);
i18nManager.start();

Include the changeLanguage() function

changeLanguage(language: string) {
    let pref = JSON.parse(localStorage.getItem('preferences'));

    if (!pref) { pref = {'storedLanguage': null}; }

    if (pref.storedLanguage !== language) {
      const i18nManager: FmdI18nManagerService = new FmdI18nManagerService(i18n_data);

      pref.storedLanguage = language;
      localStorage.setItem('preferences', JSON.stringify(pref));

      /* Either reload window and the i18nManager will read the new language     value from localStorage */
      window.location.reload();

      /* Or restart the i18nManager by calling the Start function to rebuild the map with new values */
      i18nManager.start();
    }
}

Call the function from the component

  <div>{{'hello' | i18n}}</div>
  <input value="'hello' | i18n">
  <button (click)="changeLanguage('en')">English (EN)</button>
  <button (click)="changeLanguage('fr')">French (FR)</button>

  // From code
  import { i18nKeyMap } from 'fmd-i18n-manager';

  ...

  Let str = i18nKeyMap['hello'];

Call the function from the code

  import { i18nKeyMap } from 'fmd-i18n-manager';

  ...

  Let str = i18nKeyMap['hello'];

JSON file

Your json file must be in this format:

{
  "Hello world": {
    "en": "Hello world",
    "es": "Hola Mundo",
    "fr": "Bonjour le monde"
  },
  "How are you?": {
    "en": "How are you?",
    "es": "¿Cómo estás?",
    "fr": "Comment allez-vous?"
  }
}

License

MIT