Overview
The internationalization (i18n) library for Angular by ngx-translate
.
Check on the example; http://www.ngx-translate.com and
https://github.com/ngx-translate/core
The internationalization (i18n) library for Angular by ngx-translate
.
Check on the example; http://www.ngx-translate.com and
https://github.com/ngx-translate/core
Check on these files to register a new language
/src/app/pages/_layout/topbar/language-selector/language-selector.component.ts
/src/app/modules/i18n/vocabs/*.ts
/src/app/app.component.ts
Add a new language here for the language selector to apppear; language-selector.component.ts
Duplicate en.ts
file and create a new language file in
/src/app/modules/i18n/vocabs/*.ts
. The new file name and the language code inside must be matched.
Register the language by importing the language file to /src/app/app.component.ts
and load all the
language files to TranslationService
.
import { locale as enLang } from './modules/i18n/vocabs/en';
this.translationService.loadTranslations(enLang, chLang, esLang, jpLang, deLang, frLang);
In the sample Angular application demo, the core parts like left side menu
,
topbar horizontal menu
, etc. are already implemented with the translation.
The translator understands nested JSON objects as defined in /src/app/app.component.ts
.
{
"HOME": {
"HELLO": "hello {{value}}"
}
}
*.html
(you can then access the value by using the dot notation, in this case
HOME.HELLO
):
<div [translate]="'HOME.HELLO'" [translateParams]="{value: 'world'}"></div>
*.ts
:
import { TranslateService } from '@ngx-translate/core';
// Other code
constructor(private translate: TranslateService) { }
// Other code
const _title: string = this.translate.instant('HOME.HELLO', "World");
For more detailed information, visit the official NGX Translate documentation website.