Internationalization using angular translator in Angular

Posted By : Milind Ahuja | 25-Sep-2018

angular-translator is a simple service used for translations in angular applications. All necessary features for translation should be supported by it. Few of them are interpolation, modules,  references to other translations and loaders.

 

Features :

 

1. Interpolation

 

Interpolation is supported so you can:

  • output variables in the translations
  • do calculations in tour translations
  • do pluralization
  • execute functions
{
  "HELLO":      "Hello {{ name }}!",
  "EMAILS":   "You have {{ count }} new email{{ count != 1 ? 's' : '' }}",
  "LAST_VISIT": "Your last visit was on {{ lastLogin.format('MM/DD/YYYY') }}"
}

 

2. Refer to other translations

 

By referring to other translations, it is possible to have same text everywhere without copy and paste.

{
  "WELCOME":      "Dear{{ name }}!",
  "REGISTERATION":    "[[ WELCOME : name ]] Thanks for the registeration.",
  "LOGIN_DETAILS": "[[ WELCOME : name ]] Your last login was on {{ lastLogin.format('L') }}."
}

 

3. Pipes in translations

 

Pipes can also be used inside translations exactly in the same as way as used in Angular application.

{
  "PRICE": "{{ price | currency:'EUR':true }} when you order now!"
}

 

4. Modules

 

You can divide your translations to multiple modules in such a way that each module has its own configuration. In this way, you can control the size of the translation files and are also able to customize the modules.

 

Quick Start

 

Install package via npm:

npm install --save angular-translator

 

Setup Angular module

 

Angular translator provides a simple static method for setup which needs to be add in your app module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
 
import { TranslatorModule } from 'angular-translator';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    TranslatorModule.forRoot({
      providedLanguages: ['de', 'en', 'ru'],
      defaultLanguage: 'de'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

How to Use

 

Basic Usage:

import { Component } from "angular2/core";
import { Translator } from "angular-translator";

@Component({
    selector: "my-app",
    template: "{TEXT|translate} is the same as "
})
export class AppComponent {
    constructor(translator: Translator) {
        translator.translate("TEXT").then(
          (translation) => console.log(translation)
        );
    }
}

 

If you have different sections in your website. You can make an i18n folder with separate folders of different sections and then JSON files in different languages for the translation. This way you can separate the translation for each section for better structure and customization.

About Author

Author Image
Milind Ahuja

Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.

Request for Proposal

Name is required

Comment is required

Sending message..