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

Tags: Angular2