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';
  declarations: [
  imports: [
      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";

    selector: "my-app",
    template: "{TEXT|translate} is the same as "
export class AppComponent {
    constructor(translator: Translator) {
          (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.

Request for Proposal

Recaptcha is required.

Sending message..