Localization

To handle localization we use the plugin angular-l10n[https://github.com/robisim74/angular-l10n]; in this way we can offer a runtime solution for language switching without fully reload the application.

Translations are defined in a JSON file (one for each language), saved inside the folder assets/l10n. This JSON is organized as follows:

{
	"textKey": "Text in a particular language",
	"key": "Value"
}

The textKey is the unique identifier used in the angular application (usually in the HTML template) whenever we need to retrieve a translated text. It should be in camel case.

Add a text in the localization

To add a new text in the localization, you just need to add a pair "KEY": "Text" for every language already existing. If you don't know the translation in a particular language use the English and let us know: we will handle the missing translations.

Work with localization in angular templates

To add a text in the UI so that it will be correctly translated when needed, just follow the steps below:

• In the HTML template, use the pipe translate whenever you need to insert a localized text, referring to the textKey that represents the text in question. (NB: the textKey must exist in the JSON of the translations!):

  <span [title]="'myTitle' | translate">
      {{'myText' | translate}}
  </span>

• In every existing json file for localization, add the new KEY and its translation:

  en.json
  {
      "myTitle": "My Title",
      "myText": "This is my text"
  }
  it.json
  {
      "myTitle": "Il mio titolo",
      "myText": "Questo è il mio testo"
  }

Add a new language

To add a new language to the localization so that it is automatically displayed in the language selector, just follow the steps below:

• Add the JSON file of the new language in the assets/i18n folder.

  • This file must be named as "LANGUAGE_CODE.json", where "LANGUAGE_CODE" is the reference code of the new language;
  • this file must present ALL the keys that exist in the other files, so it is advisable to make a copy-paste of one of the files already present before starting with the translations.

• In the ui_config.json file, add an element to the list of availableLanguages. This element must be structured as follows:

  { 
      "code": "cd", 
      "dir": "ltr",
      "label": "Lang Label",
      "enabled": true
  }

  • code indicates the language code (the one used to name the JSON file);
  • label indicates the language label, to be shown in the UI
  • enabled indicates if the language should be activated or deactivated

• In every other JSON translations file the key "language_LANGUAGE_CODE" to have a translation of the name of the new language in all the others already present and managed.

• Finally, add a .png file that depicts the flag identifying the new language in the assets/images folder. This file must be named with the code of the new language and must preferably be a square with not too large dimensions.

• For further information please refer to official documentation of ngx-translate/core plugin