1.6 KiB
I18n
The internationalization of the application is managed by ngx-translate.
Adding translatable strings
In HTML templates
Use the translate
directive on an HTML element to automatically translate its content:
<span translate>This text will be translated.</span>
You can also use the translate
pipe if needed:
<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:
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 run 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:
import { extract } from './core/i18n.service';
function toBeTranslatedLater() {
return extract('A string to be translated');
}
Strings marked like this will then be properly extracted.