Translations

Translations are handled using the ngx-translate package, with some added tweaks:

1. A custom json5 loader is used to allow custom anchors in the expanded translation file.
2. A custom missing translation handler is added to print a warning in console when a translation is not present in the current used language.

This package allows you to translate values using either use the TranslateService, the TranslatePipe or the TranslateDirective.

TranslateService

translateService.getTranslation('space.name').subscribe((res: string) => {
    console.log(res);
});

TranslatePipe

<div>{{ 'space.name' | translate}}</div>

TranslateDirective

<div [translate]="'space.name'"></div>

<div translate>space.name</div>

To add languages, you simply add a language.json5 file in the assets/i18n folder. You can toggle between languages using the use method of the TranslationService or use the option angular.defaultLanguage.

this.translationService.use("en");

Option

angular.defaultLanguage AngularApp

Defines the default used language for translations. Value is the name of the translation file, e.g. nl.

<options>
  <angular.defaultLanguage>nl</angular.defaultLanguage>
</options>