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
To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/
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.