Translation

WARNING: This site is still work in progress. For more information, see !106 (merged)

In HTML

In HTML, replace any text with handlebars with the translate pipe. You can use this syntax inside a tag and inside placeholders etc.

The selector for the string has to be unique. Please follow these rules for the selector: <component-name>.<string-name>. Selectors have to stand in single quotes '

<button>{{ 'header.english' | translate }}</button>
<input type="password" placeholder="{{ 'login.password' | translate }}" name="password"/>

In Typescript

In Typescript, you can reach for any text string via the TranslateService.

First, you have to add the TranslateService to the constructor of the component: constructor(private translationService: TranslateService) {}. After making the translationService available, you can access the strings via this.translationService.get('<identifier>'). Please note that the TranslateService uses a http loader. Therefore, fetching translations is asynchronous and needs to be subscribed. An example can be found underneath.

constructor (private notificationService: NotificationService,
  private translationService: TranslateService) {
}

...

// Shows a notification
this.translationService.get('login.login-successful').subscribe(message => {
  this.notificationService.show(message);
};

Generating translation files

To generate translation files, run npm run extract. The extraction tool scans all files for string requests and creates a map of all needed strings. These will be generated in a json file.

Per default, a language file for english (en) and german (de) will be created at ./src/assets/i18n/.

Existing translations remain untouched, so that translations will not be lost (so you do not have to worry about backups and/or merging translation files).

Also, the extraction tool tracks any unused translation identifier and cleans the translation file.

Adding languages

To add another language, two steps are required:

Add the language to the extraction tool command: In the package.json file, there is an entry under "scripts" called "extract": "...". Find the place in the second string where the ouput files are referenced (after --output) and add an output path for your language ./src/assets/i18n/<language-code>.json.
Add the language to the language select in the header component: Add a new element into the #langMenu like this <button mat-menu-item (click)="useLanguage('<language-code>')">{{ 'header.<language-name>' | translate }}</button>