Translate

The Angular library translate provides:

• The service TranslateService to help translate your texts with parameters from a class (component, service...).
• The pipe PvoTranslatePipe to translate your contents in views.

Note that this library and its configuration (angular.json) are compliant with Angular 5+.

Summary

• Installation
• Configuration
• Dictionaries
• Import TranslateModule with the dictionary
• Translate in a class with injected service
• Translate in a view with the PvoTranslate pipe
• Serving the application
• Usage

Installation

npm install --save @olop/ng-translate

Configuration

By default, if you need only one language, no configuration is necessary, a default dictionary is used (locale.ts). Otherwise, you need to define configurations that will use a different dictionaries for other languages. Here is an example with a french dictionary (locale.fr.ts):

angular.json (Angular 5+)

{
  "projects": {
    "my-application": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "fr": {
              "fileReplacements": [
                {
                  "replace": "src/locales/locale.ts",
                  "with": "src/locales/locale.fr.ts"
                }
              ]
            }
          }
        },
        "serve": {
          ...
          "configurations": {
            "fr": {
              "browserTarget": "my-application:build:fr"
            }
          }
        },
        ...
      }
    }
  }
}

Dictionaries

locale.ts (default)

import { Locale } from '@olop/ng-translate';

const locale: Locale = {
  hello: [
    ['Hello world', 'Hello world'],
    ['My name is', 'My name is {{name}}'],
    ['Bob', 'Bob']
  ],
  welcome: [
    ['Welcome', 'Welcome'],
    ['Home', 'Home'],
  ],
};

locale.fr.ts (configuration fr)

import { Locale } from '@olop/ng-translate';

const locale: Locale = {
  hello: [
    ['Hello world', 'Bonjour le monde'],
    ['My name is', "Je m'appelle {{name}}"],
    ['Bob', 'Robert']
  ],
  welcome: [
    ['Welcome', 'Bienvenue'],
    ['Home', 'Chez toi'],
  ],
};

Import TranslateModule with the dictionary

app.module.ts

import { NgModule } from "@angular/core";
import { TranslateModule } from "@olop/ng-translate";
import { locale } from "./locales/locale";

@NgModule({
  imports: [TranslateModule.forRoot([locale])]
})
export class AppModule {}

Translate in a class with injected service

Note that the service is injected by itself in root, then no need to provide it anywhere.

my.component.ts

import { Component } from "@angular/core";
import { TranslateService } from "@olop/ng-translate";

@Component({
  template: "<p>{{ text }}</p>",
})
export class MyComponent {
  public text: string;

  constructor(translateService: TranslateService) {
    this.text = translateService.translate('hello', 'Hello world');
  }
}

Translate in a view with the pipe PvoTranslatePipe

some-view.component.html

<p>{{ 'Hello world' | pvoTranslate:'hello' }}</p>

Serving the application

By default, the English dictionary will be used (locale.ts):

ng serve my-application

To use french translations (locale.fr.ts), serve with the corresponding configuration:

ng serve my-application --configuration fr

Usage

Translate a static text:

this.text = translateService.translate('hello', 'Hello world');
// Bonjour le monde

<p>{{ 'Hello world' | pvoTranslate:'hello' }}</p>
<!-- <p>Bonjour le monde</p> -->

Translate with interpolations:

this.params = { name: 'Paul' };
this.text = translateService.translate('hello', 'My name is', this.params);
// => Je m'appelle Paul

<p>{{ 'My name is' | pvoTranslate:'hello':params }}</p>
<!-- <p>Je m'appelle Paul</p> -->

Translate with translated interpolations:

this.params = { name: translateService.translate('hello', 'Bob') };
this.text = translateService.translate('hello', 'My name is', this.params);
// => Je m'appelle Robert

<p>{{ 'My name is' | pvoTranslate:'hello':params }}</p>
<!-- <p>Je m'appelle Robert</p> -->