Internationalization using angular translator in Angular
Posted By : Milind Ahuja | 25-Sep-2018
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
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
{
"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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Milind Ahuja
Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.