logo 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.