Best Angular 2/4/5/6 (ngx) ng6 translate module i18n (internationalization) from JSON file with pluralization (Zero value state included)
Demo: http://www.ng-translate.com
Plunker: https://plnkr.co/edit/bpqyjTLuFIzZtR33Ov24?p=preview
- Installation
- Configuration
- How it works
- Examples usage
- Simple translation
- Simple translation from shortcut
- Translate with params
- Translate with params from shortcut
- Translate with muliple params
- Translate with muliple params from shortcut
- Translate with plural params
- Translate with plural params from shortcut
- Translate with Zero value params
- Translate with Zero value params from shortcut
- Api Reference
Install npm module
// Angular 15+
npm install doorgets-ng-translate --save
// Angular 2 -> 8
npm install doorgets-ng-translate@1.0.4 --save
System.config({
...
map: {
...,
'doorgets-ng-translate': 'node_modules/doorgets-ng-translate'
},
packages: {
...,
'doorgets-ng-translate': {main: 'bundles/doorgets-ng-translate.umd.js', defaultExtension: 'js'}
});
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DoorgetsTranslateModule } from 'doorgets-ng-translate';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
HttpModule,
DoorgetsTranslateModule.forRoot()
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
Import:
...
import { HttpModule } from '@angular/http';
import { DoorgetsTranslateModule } from 'doorgets-ng-translate';
...
@NgModule:
imports: [
BrowserModule,
HttpModule,
DoorgetsTranslateModule.forRoot()
],
import { Component, OnInit } from '@angular/core';
import { DoorgetsTranslateService } from 'doorgets-ng-translate';
@Component({
selector: 'my-app',
template: ``,
})
export class AppComponent implements OnInit {
constructor(private doorgetsTranslateService: DoorgetsTranslateService) { }
ngOnInit() {
this.doorGetTranslateService.init({
languages: ['en', 'fr'],
current: 'fr',
default: 'fr'
});
}
}
Import DoorgetsTranslateService:
import { DoorgetsTranslateService } from 'doorgets-ng-translate';
Init constructor:
constructor(private doorGetTranslateService: DoorgetsTranslateService) {}
Set Languages, Current and Default:
ngOnInit() {
this.doorGetTranslateService.init({
languages: ['en', 'fr'],
current: 'fr',
default: 'fr'
});
}
####4. Finally, create a locale
folder at the root of your project with appropiate country traduction files
|-- + locale/
|-- en.json
|-- fr.json
|-- es.json
|-- ...
|-- + src/
|-- package.json
|-- tsconfig.json
|-- systemjs.config.js
// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';
// Doorgets
import 'doorgets-ng-translate';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DoorgetsTranslateModule , NgTranslate, NgTranslateAbstract } from 'doorgets-ng-translate';
export function newNgTranslate(http: HttpClient) {
return new NgTranslate(http, '../../public/locale');
}
@NgModule({
imports: [
HttpModule,
DoorgetsTranslateModule.forRoot({
provide: NgTranslateAbstract,
useFactory: (newNgTranslate),
deps: [HttpClient]
}),
BrowserModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Import:
...
import { HttpModule, Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { DoorgetsTranslateModule , NgTranslate, NgTranslateAbstract } from 'doorgets-ng-translate';
...
Export:
...
export function newNgTranslate(http: HttpClient) {
return new NgTranslate(http, '../../public/locale');
}
...
@NgModule:
imports: [
HttpModule,
DoorgetsTranslateModule.forRoot({
provide: NgTranslateAbstract,
useFactory: (newNgTranslate),
deps: [Http]
}),
BrowserModule
],
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DoorgetsTranslateModule , NgTranslate, NgTranslateAbstract } from 'doorgets-ng-translate';
export function newNgTranslate(http: Http) {
return new NgTranslate(http, '../../public/locale');
}
@NgModule({
imports: [
HttpModule,
DoorgetsTranslateModule.forRoot({
provide: NgTranslateAbstract,
useFactory: (newNgTranslate),
deps: [Http]
}),
BrowserModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Import:
...
import { HttpModule, Http } from '@angular/http';
import { DoorgetsTranslateModule , NgTranslate, NgTranslateAbstract } from 'doorgets-ng-translate';
...
Export:
...
export function newNgTranslate(http: Http) {
return new NgTranslate(http, '../../public/locale');
}
...
@NgModule:
imports: [
HttpModule,
DoorgetsTranslateModule.forRoot({
provide: NgTranslateAbstract,
useFactory: (newNgTranslate),
deps: [Http]
}),
BrowserModule
],
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import '../../public/css/styles.css';
import { DoorgetsTranslateService } from 'doorgets-ng-translate';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements OnInit {
constructor(private doorGetTranslateService: DoorgetsTranslateService) {}
ngOnInit() {
this.doorGetTranslateService.init({
languages: ['en', 'fr'],
current: 'fr',
default: 'fr'
});
}
}
Import DoorgetsTranslateService:
import { DoorgetsTranslateService } from 'doorgets-ng-translate';
Init constructor:
constructor(private doorGetTranslateService: DoorgetsTranslateService) {}
Set Languages, Current and Default:
ngOnInit() {
this.doorGetTranslateService.init({
languages: ['en', 'fr'],
current: 'fr',
default: 'fr'
});
}
4. Finally, create a locale
folder at the public
folder of your project with appropiate country traduction files
|-- + public/
|-- + locale/
|-- en.json
|-- fr.json
|-- es.json
|-- ...
|-- + config/
|-- + src/
|-- package.json
|-- tsconfig.json
|-- webpack.config.js
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { DoorgetsTranslateModule , NgTranslate, NgTranslateAbstract } from 'doorgets-ng-translate';
export function newNgTranslate(http: Http) {
return new NgTranslate(http, './assets/locale');
}
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
HttpModule,
DoorgetsTranslateModule.forRoot({
provide: NgTranslateAbstract,
useFactory: (newNgTranslate),
deps: [Http]
}),
IonicModule.forRoot(MyApp),
FormsModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
Import:
...
import { HttpModule, Http } from '@angular/http';
import { DoorgetsTranslateModule , NgTranslate, NgTranslateAbstract } from 'doorgets-ng-translate';
...
Export:
...
export function newNgTranslate(http: Http) {
return new NgTranslate(http, './assets/locale');
}
...
@NgModule:
imports: [
HttpModule,
DoorgetsTranslateModule.forRoot({
provide: NgTranslateAbstract,
useFactory: (newNgTranslate),
deps: [Http]
}),
IonicModule.forRoot(MyApp),
FormsModule
],
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { TabsPage } from '../pages/tabs/tabs';
import { DoorgetsTranslateService } from 'doorgets-ng-translate';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage = TabsPage;
constructor(platform: Platform, private doorgetsTranslateService: DoorgetsTranslateService) {
platform.ready().then(() => {
doorgetsTranslateService.init({
languages: ['en', 'fr'],
current: 'fr',
default: 'fr'
});
StatusBar.styleDefault();
Splashscreen.hide();
});
}
}
Import DoorgetsTranslateService:
import { DoorgetsTranslateService } from 'doorgets-ng-translate';
Init constructor:
constructor(platform: Platform, private doorgetsTranslateService: DoorgetsTranslateService) {
Set Languages, Current and Default:
platform.ready().then(() => {
doorgetsTranslateService.init({
languages: ['en', 'fr'],
current: 'fr',
default: 'fr'
});
StatusBar.styleDefault();
Splashscreen.hide();
});
3. Finally, create a locale
folder at the assets
folder of your project with appropiate country traduction files
|-- + resources/
|-- + src/
|-- + assets/
|-- + locale/
|-- en.json
|-- fr.json
|-- es.json
|-- ...
|-- + app/
|-- + pages/
|-- + theme/
|-- ...
|-- config.xml
|-- package.json
|-- tsconfig.json
|-- ionic.config.json
Translation file:
{
"How are you?": "Comment ça va?",
"hello": {
"form": "Comment ça va?"
}
}
For simple translation you can use human sentence inside key object:
"How are you?" // result => Comment ça va?
Or your can use key and subkey:
"hello.form" // result => Comment ça va?
Params works with collection
['firstParam', 'secondParam', '...']
, not Object{}
Marker key is the concatenation of $ and position key inside collection
Why? this is very faster than object !
Translation file:
{
"Hello $0, my name is $1, i live in $2": "Salut $0, je m'appel $1, je vie Ă $2"
}
Collection params: ["John Doe", "Mounir R'Quiba", "Paris"]
// $ + position => $0 => John Doe
// $ + position => $1 => Mounir R'Quiba
// $ + position => $2 => Paris
"Hello $0, my name is $1, i live in $2"
// result => "Salut John Doe, je m'appel Mounir R'Quiba, je vie Ă Paris"
Pluralizaition works with THE BANANA IN THE BOX
[(
open tag and)]
to close tagEvery block is serparated by a pipe
|
You can use 1 to 3 blocks, so the maximum of pipes is 2
Translation file:
{
"I have [($0|$0 apple|$0 apples)] in [($1|$1 bag|$1 bags)]": "J'ai [($0|$0 pomme|$0 pommes)] dans [($1|$1 sac|$1 sacs)]"
}
Collection params: [2, 1]
// $ + position => $0 => 2
// $ + position => $1 => 1
"I have [($0|$0 apple|$0 apples)] in [($1|$1 bag|$1 bags)]"
// result => "J'ai 2 pommes dans 1 sac"
Explanation
[($0|$0 apple|$0 apples)]
block 1:
$0
is the key to findblock 2:
$0 apple
is the translated sentence when $0 <= 1block 3:
$0 apples
is the translated sentence when $0 > 1
Zero value works with THE BANANA IN THE BOX
[(
open tag and)]
to close tagEvery block is serparated by a pipe
|
You can use 1 to 4 blocks, so the maximum of pipes is 3
Translation file:
{
"I have [($0|$0 apple|$0 apples|nothing)] [($1|in my bag|in $1 bags|)]": "[($0|J'ai une pomme|J'ai $0 pommes|Je n'ai rien)] [($1|dans mon sac|dans mes $1 sacs|)]"
}
Collection params: [1, 1]
// $ + position => $0 => 1
// $ + position => $1 => 1
"I have [($0|$0 apple|$0 apples|nothing)] in [($1|$1 bag|$1 bags|my bag)]"
// result => "J'ai une pomme dans mon sac"
Collection params: [0, 0]
// $ + position => $0 => 0
// $ + position => $1 => 0
"I have [($0|$0 apple|$0 apples|nothing)] in [($1|$1 bag|$1 bags|my bag)]"
// result => "Je n'ai rien"
Explanation
[($0|$0 apple|$0 apples|nothing)]
block 1:
$0
is the key to findblock 2:
$0 apple
is the translated sentence when $0 == 1block 3:
$0 apples
is the translated sentence when $0 > 1
block 4:
nothing
is the translated sentence when $0 <= 0
./locale/fr.json
{
"Are you ready?": "ĂŠtes-vous prĂŞt ?",
}
@Directive:
<span [dgTranslate]>Are you ready?</span>
Output: ĂŠtes-vous prĂŞt ?
@Directive:
<span [dgTranslate]="'Are you ready?'"></span>
Output: ĂŠtes-vous prĂŞt ?
@Pipe:
{{ 'Are you ready?' | dgTranslate }}
Output: ĂŠtes-vous prĂŞt ?
./locale/fr.json
{
"label": {
"ready": "ĂŠtes-vous prĂŞt ?"
}
}
@Directive:
<span [dgTranslate]>label.ready</span>
Output: ĂŠtes-vous prĂŞt ?
@Directive:
<span [dgTranslate]="label.ready'"></span>
Output: ĂŠtes-vous prĂŞt ?
@Pipe:
{{ label.ready' | dgTranslate }}
Output: ĂŠtes-vous prĂŞt ?
./locale/fr.json
{
"Hello $0": "Salut $0"
}
@Directive:
<span [dgTranslate] [dgTranslateOptions]="[myName]">
Hello $0
</span>
myName = Mounir R'Quiba
Output: Salut Mounir R'Quiba
@Directive:
<span [dgTranslate]="'Hello $0'" [dgTranslateOptions]="[myName]"></span>
myName = Mounir R'Quiba
Output: Salut Mounir R'Quiba
@Pipe:
{{ 'Hello $0' | dgTranslate :myName }}
myName = Mounir R'Quiba
Output: Salut Mounir R'Quiba
./locale/fr.json
{
"label": {
"hello": "Salut $0"
}
}
@Directive:
<span [dgTranslate] [dgTranslateOptions]="[myName]">
label.hello
</span>
myName = Mounir R'Quiba;
Output: Salut Mounir R'Quiba
@Directive:
<span [dgTranslate]="'label.hello'" [dgTranslateOptions]="[myName]"></span>
myName = Mounir R'Quiba;
Output: Salut Mounir R'Quiba
@Pipe:
{{ 'label.hello' | dgTranslate :myName }}
myName = Mounir R'Quiba;
Output: Salut Mounir R'Quiba
./locale/fr.json
{
"label": {
"name": "Je m'appel $0 j'aime coder avec $1"
}
}
@Directive:
<span [dgTranslate] [dgTranslateOptions]="[myName, myLanguage]">
My name is $0 I like coding with $1
</span>
myName = Mounir R'Quiba; myLanguage = Angular 2;
Output: Je m'appel Mounir R'Quiba j'aime coder avec Angular 2
@Directive:
<span [dgTranslate]="'My name is $0 I like coding with $1'" [dgTranslateOptions]="[myName, myLanguage]"></span>
myName = Mounir R'Quiba; myLanguage = Angular 2;
Output: Je m'appel Mounir R'Quiba j'aime coder avec Angular 2
@Pipe:
{{ 'My name is $0 I like coding with $1' | dgTranslate :myName :myLanguage }}
myName = Mounir R'Quiba; myLanguage = Angular 2;
Output: Je m'appel Mounir R'Quiba j'aime coder avec Angular 2
./locale/fr.json
{
"label": {
"name": "Je m'appel $0 j'aime coder avec $1"
}
}
@Directive:
<span [dgTranslate] [dgTranslateOptions]="[myName, myLanguage]">
label.name
</span>
myName = Mounir R'Quiba; myLanguage = Angular 2;
Output: Je m'appel Mounir R'Quiba j'aime coder avec Angular 2
@Directive:
<span [dgTranslate]="'label.name'" [dgTranslateOptions]="[myName, myLanguage]"></span>
myName = Mounir R'Quiba; myLanguage = Mounir R'Quiba
Output: Je m'appel Mounir R'Quiba j'aime coder avec Angular 2
@Pipe:
{{ 'label.name' | dgTranslate :myName :myLanguage }}
myName = Mounir R'Quiba; myLanguage = Mounir R'Quiba
Output: Je m'appel Mounir R'Quiba j'aime coder avec Angular 2
./locale/fr.json
{
"I have [($0|$0 apple|$0 apples)] in [($1|$1 bag|$1 bags)]": "J'ai [($0|$0 pomme|$0 pommes)] dans [($1|$1 sac|$1 sacs)]"
}
@Directive:
<span [dgTranslate] [dgTranslateOptions]="[countApple, countBag]">
I have [($0|$0 apple|$0 apples)] in [($1|$1 bag|$1 bags)]
</span>
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
@Directive:
<span [dgTranslate]="'I have [($0|$0 apple|$0 apples)] in [($1|$1 bag|$1 bags)]'" [dgTranslateOptions]="[countApple, countBag]"></span>
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
@Pipe:
{{ 'I have [($0|$0 apple|$0 apples)] in [($1|$1 bag|$1 bags)]' | dgTranslate :countApple :countBag }}
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
./locale/fr.json
{
"label": {
"quantity": "J'ai [($0|$0 pomme|$0 pommes)] dans [($1|$1 sac|$1 sacs)]"
}
}
@Directive:
<span [dgTranslate] [dgTranslateOptions]="[countApple, countBag]">
label.quantity
</span>
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
@Directive:
<span [dgTranslate]="'label.quantity'" [dgTranslateOptions]="[countApple, countBag]"></span>
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
@Pipe:
{{ 'label.quantity' | dgTranslate :countApple :countBag }}
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
./locale/fr.json
{
"I have [($0|$0 apple|$0 apples|nothing)] in [($1|$1 bag|$1 bags|my bag)]": "J'ai [($0|$0 pomme|$0 pommes|rien)] dans [($1|$1 sac|$1 sacs|mon sac)]"
}
@Directive:
<span [dgTranslate] [dgTranslateOptions]="[countApple, countBag]">
I have [($0|$0 apple|$0 apples|nothing)] in [($1|$1 bag|$1 bags|my bag)]
</span>
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
countApple = 0; countBag = 0;
Output: J'ai rien dans mon sac
@Directive:
<span [dgTranslate]="'I have [($0|$0 apple|$0 apples|nothing)] in [($1|$1 bag|$1 bags|my bag)]'" [dgTranslateOptions]="[countApple, countBag]"></span>
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
countApple = 0; countBag = 0;
Output: J'ai rien dans mon sac
@Pipe:
{{ 'I have [($0|$0 apple|$0 apples|nothing)] in [($1|$1 bag|$1 bags|my bag)]' | dgTranslate :countApple :countBag }}
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
countApple = 0; countBag = 0;
Output: J'ai rien dans mon sac
./locale/fr.json
{
"label": {
"zero": "J'ai [($0|$0 pomme|$0 pommes|rien)] en [($1|$1 sac|$1 sacs|mon sac)]"
}
}
@Directive:
<span [dgTranslate] [dgTranslateOptions]="[countApple, countBag]">
label.zero
</span>
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
countApple = 0; countBag = 0;
Output: J'ai rien dans mon sac
@Directive:
<span [dgTranslate]="'label.zero'" [dgTranslateOptions]="[countApple, countBag]"></span>
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
countApple = 0; countBag = 0;
Output: J'ai rien dans mon sac
@Pipe:
{{ 'label.zero' | dgTranslate :countApple :countBag }}
countApple = 2; countBag = 1;
Output: J'ai 2 pommes dans 1 sac
countApple = 0; countBag = 0;
Output: J'ai rien dans mon sac
Quick init
doorGetTranslateService.init({
languages: ['fr', 'en'],
current: 'fr',
default: 'en'
});
Or
doorGetTranslateService.add(['fr', 'en'])
doorGetTranslateService.setCurrent('fr');
doorGetTranslateService.setDefault('fr');
doorGetTranslateService.setCurrent('en');
doorGetTranslateService.get('myKey').subscribe((res: string) => {
// res contain translated value
});
doorGetTranslateService.get('myKey', [1, 1]).subscribe((res: string) => {
// res contain translated value
});
// res contain translated value
res = doorGetTranslateService.instant('myKey');
The MIT License
Copyright (c) 2017 Mounir R'Quiba http://www.doorgets.com/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.