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

How to add a new language

Check on these files to register a new language

1. /src/app/pages/_layout/topbar/language-selector/language-selector.component.ts
2. /src/app/modules/i18n/vocabs/*.ts
3. /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);

How to use

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.

1. Vocabulary example:

   {
   	"HOME": {
       "HELLO": "hello {{value}}"
     }
   }

2. View example *.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>

3. Code behind example *.ts:

   import { TranslateService } from '@ngx-translate/core';
   	// Other code
   	constructor(private translate: TranslateService) { }
   	// Other code
   	const _title: string = this.translate.instant('HOME.HELLO', "World");