54 lines
1.6 KiB
Markdown
54 lines
1.6 KiB
Markdown
# I18n
|
|
|
|
The internationalization of the application is managed by [ngx-translate](https://github.com/ngx-translate/core).
|
|
|
|
## Adding translatable strings
|
|
|
|
### In HTML templates
|
|
|
|
Use the `translate` directive on an HTML element to automatically translate its content:
|
|
```html
|
|
<span translate>This text will be translated.</span>
|
|
```
|
|
|
|
You can also use the `translate` pipe if needed:
|
|
```html
|
|
<button title="{{ 'Add item' | translate }}">+</button>
|
|
```
|
|
|
|
### In TypeScript code
|
|
|
|
If you need to translate strings in JavaScript code, import the `TranslateService` dependency and use the asynchronous
|
|
`get()` method:
|
|
|
|
```typescript
|
|
let title;
|
|
translateService.get('My page title').subscribe((res: string) => { title = res; });
|
|
```
|
|
|
|
## Extracting strings to translate
|
|
|
|
Once you are ready to translate your app, just run `npm translations:extract`.
|
|
It will create a `template.json` file in the `src/translations` folder.
|
|
|
|
You can then use any text or code editor to generate the `.json` files for each of your supported languages, and put
|
|
them in the `src/translations` folder.
|
|
|
|
Do no forget to edit the files in `src/environment` to add the supported languages of your application.
|
|
|
|
### Marking strings for extraction
|
|
|
|
If strings are not directly passed to `translateService` or put in HTML templates, they may be missing from the
|
|
extraction process.
|
|
|
|
For these cases, you have to use the dummy `extract()` function:
|
|
```typescript
|
|
import { extract } from './core/i18n.service';
|
|
|
|
function toBeTranslatedLater() {
|
|
return extract('A string to be translated');
|
|
}
|
|
```
|
|
|
|
Strings marked like this will then be properly extracted.
|