angular-translator
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.2 • Public • Published

    Angular Translator

    Build Status Coverage Status npm version

    angular-translator is a simple translation service for angular applications. It should support all necessary features for translation. Like interpolation, references to other translations, modules and loaders.

    Features

    Interpolation

    It supports interpolation so you can:

    • output variables in your translations
    • calculate in your translations
    • pluralize in your translations
    • execute functions in your translations
    {
      "HELLO":      "Hello {{ name }}!",
      "ANSWER":     "The answer is {{ 7 * 6 }}",
      "MESSAGES":   "You have {{ count }} new message{{ count != 1 ? 's' : '' }}",
      "LAST_LOGIN": "Your last login was on {{ lastLogin.format('MM/DD/YYYY') }}"
    }

    * dynamic translations

    Refer to other translations

    By referring to other translations you can make it easy to have everywhere the same text without copy and paste.

    {
      "GREETING":      "Hello {{ name }}!",
      "REGISTERED":    "[[ GREETING : name ]] Thanks for registering at this service.",
      "LOGIN_CONFIRM": "[[ GREETING : name ]] Your last login was on {{ lastLogin.format('L') }}."
    }

    * dynamic translations

    Use pipes in translations

    Pure pipes can be used inside translations. This makes formatting easier and localized.

    {
      "DISCOUNT": "Save {{ original - price | currency:'USD':true }} when you order now!"
    }

    * dynamic translations

    Modules

    Your translations can be divided to multiple modules. Each module can have a different configuration. This way you have more control over the size of translation files and are able to provide some modules in more or less languages.

    * Modules

    Different loaders

    This module supports different loaders. It is shipped with a basic JSON loader (next paragraph). You can create own and static loaders. It is also possible to use different loader strategies for each module.

    * TranslationLoader

    JSON loader

    It is a basic loader that loads the translation for a specific language and module from your JSON file. A translation can be an array to allow multi line translations (to make the files readable and better structured).

    * TranslationLoaderJson

    How to use

    Simple basic usage:

    import { Component } from "angular2/core";
    import { Translator } from "angular-translator";
    
    @Component({
        selector: "my-app",
        template: "{{ TEXT | translate }} is the same as <span translate=\"TEXT\"></span>"
    })
    export class AppComponent {
        constructor(translator: Translator) {
            translator.translate("TEXT").then(
              (translation) => console.log(translation)
            );
        }
    }

    To learn more have a look at the documentation.

    How to upgrade from angular2-translator

    1. Upgrade the package

    Remove angular2-translator and install angular-translator.

    npm remove angular2-translator --save
    npm install angular-translator --save

    2. Update your setup

    Angular translator now gives a simple-to-use static method for setup. This function also creates all required providers. The usage is as follows.

    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 { }

    3. Change the implementation from TranslateService to Translator

    The TranslateService has been renamed to Translator. It has the same methods and can therefore be exchanged:

    import { Component } from '@angular/core';
    
    import { TranslateService } from 'angular2-translator'; // before
    import { Translator } from 'angular-translator'; // now
    
    @Component()
    export class ComponentBefore {
      constructor(translateService: TranslateService) {
        translateService.translate('TEXT').then((translation) => this.text = translation);
      }
    }
    
    @Component()
    export class ComponentNow {
      constructor(translator: Translator) {
        translator.translate('TEXT').then((translation) => this.text = translation);
      }
    }

    You can do this by search and replace on your own risk.

    4. Change the implementation for changing the language

    The Translator has a public property language and you can use it as before with TranslateService. There is a new service called TranslatorContainer that holds all Translators for different modules. When you want to change the language for every module you may want to change TranslatorContainer.language instead. The change will be forwarded to every Translator.

    5. Other questions

    I used the languageChanged observable to update translations inside services and components. Do I need to change here something?

    No, the Translator has the same observable that should be used now.

    My configuration seems to be ignored after upgrade.

    May be you copied your previous config. The parameters have changed: defaultLang - defaultLanguage, providedLangs - providedLanguages, detectLanguageOnStart - detectLanguage.

    How to install

    Get the package

    First you need to install the package. The easiest way is to install it via npm:

    npm install --save angular-translator

    Setup angular module

    You have to set up each NgModule where you want to use the TranslatorModule and may be configure it:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { TranslatorModule } from "angular-translator";
    
    import { AppComponent } from './app.component';
    
    export function translateConfigFactory() {
        return new TranslateConfig();
    }
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        TranslatorModule.forRoot({
          defaultLanguage: "de",
          providedLanguages: [ "de", "en" ],
          detectLanguage: false
        }),
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Using SystemJs

    When you are using SystemJs you need to configure where to load angular-translator:

    System.config({
        map: {
            'angular-translator':       'npm:angular-translator/bundles/angular-translator.js'
        }
    });

    Manually

    You also can clone the repository and symlink the project folder or what ever:

    git clone https://github.com/tflori/angular-translator.git
    ln -s angular-translator MyApp/libs/angular-translator

    You should know what you do and don't follow this guide for installation.

    Demo

    This project demonstrates how to use angular-translator. The production version is distributed here.

    Install

    npm i angular-translator

    DownloadsWeekly Downloads

    81

    Version

    3.1.2

    License

    MIT

    Unpacked Size

    643 kB

    Total Files

    73

    Last publish

    Collaborators

    • tflori