|
|
WARNING: This site is still work in progress. For more information, see !106
|
|
|
|
|
|
### 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:
|
|
|
|
|
|
1. 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`.
|
|
|
1. 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>` |
|
|
\ No newline at end of file |