Blog

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

Tags: Angular2