Awesome

Angular2 translate

This is a simple translate service solution for angular2. You should provide a dictionary and the service will translate it with sprintf interpolation.

Install

npm install --save angular2-translate

Setup

import { TranslateModule } from 'angular2-translate';

const translations = {
  useValue: {
    main: {
      text: 'I am: %s you are: %s'
    },
    other: {
      withoutInterpolation: 'Star Wars'
    }
  }
};

@NgModule({
  imports: [
    BrowserModule,
    TranslateModule.create(translations)
  ],
  declarations: [AppComponent],
  bootstrap:    [AppComponent]
})
export class AppModule { }

Usage in template

import { TranslatePipe } from 'angular2-translate';

@Component({
  selector: '<sub-app>',
  template: `
    <h1>{{ 'main.text' | translate:'Luke':controllerVariable }}</h1>
    <h2>{{ 'other.withoutInterpolation' | translate }}</h2>
  `
})
export class App {

  constructor() {
    this.controllerVariable = 'Darth Vader';
  }

Usage in Controller

import { TranslateService } from 'angular2-translate';

@Component({
  selector: '<sub-app>',
  template: `Some content`
})
export class App {

  constructor(translateService: TranslateService) {
    this.translated = translateService.translate('main.text', ['first', 'second']);
  }