Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

## Internationalization (i18n)

### 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`.

Examples of usage:

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");

For more detailed information, visit the official NGX Translate documentation website.