Localization in an angular application can increase its efficiency to solve business problems as it helps the software to attach people through their locale
or language
Translated apps have an ability to focus on users having different language, culture and place. In this article I am going to discuss implementation of internationalization in angular applications using @rxweb/translate
Concept
1) Taking care of two major factors : Maintainability and Consistency
2) Keeping the source code and the translation cords seperate
3) Globally resolving translated data, setting default language and adding languages
4) Following right coding practices and standards
Get Started
let's get started by installing the package
npm install @rxweb/translate
Registration of the Module :
Import the generated Translate in app.module.ts as below:
For the module in the application, import the
TranslateModule
as well
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import { RxWebModule } from './rxweb.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RxTranslateModule.forRoot({
cacheLanguageWiseObject: true,
globalFilePath: "assets/i18n/{{language-code}}/global.{{language-code}}.json",
filePath: "assets/i18n/{{language-code}}/{{translation-name}}.{{language-code}}.json"})
],
providers: [RxTranslateModule],
exports: [RxTranslateModule],
bootstrap: [AppComponent]
})
export class AppModule { }
RxTranslateModule file contains properties with their usage as below:
1) cacheLanguageWiseObject : Set it true
to maintain cache of the translation keys to increase the performance.
2) globalFilePath : Set the global translation file to resolve the
global translation objects component wise or eg: for en(global.en.json)
3) filePath : Set the file path for resolving the translation objects in each module in respect to its translation name eg : for login(login.en.json)
Resolve Global Translate Data :
In the app component resolve the @translate
decorator object to get the translated global data
app.component.ts:
import { Component } from '@angular/core';
import { translate } from '@rxweb/translate';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@translate() global: any;
}
Bind The text :
Bind the text based upon the resolved object in app component using two way binding(Interpolation) used in angular
app.component.html:
{{global.Title}}
Form The Json :
The translation objects are resolved from the global file path and the structure of the json files is as below:
Forming the json in the files as keys based upon the multilingual content you want. Say for example you are translating your content into two languages(en and fr) then the title would be formed as:
Output :
Here is the output of the above code. A complete basic example can be viewed on stackblitz
Resolve Component Based Translation Data
In the component resolve the @translate
decorator object to get the translated
data based upon the translation name, Here is an example of a login component so here the translation name will be login
login.component.ts
import { Component, OnInit } from '@angular/core';
import { translate, RxTranslation } from '@rxweb/translate';
@Component({
selector: 'app-login-component',
templateUrl: './login-component.component.html',
styleUrls: ['./login-component.component.css']
})
export class LoginComponent implements OnInit {
@translate({translationName:'login'}) login: any;
constructor(){
}
}
Bind The text :
Bind the text based upon the resolved object in login component using the same way as global translation using the login object
app.component.html:
<form>
<div class="form-group">
<label for="exampleInputEmail1">{{login.emailLabel}}</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">{{login.emailNoteText}}</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">{{login.passwordLabel}}</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">{{login.checkOutText}}</label>
</div>
<button type="submit" class="btn btn-primary">{{login.submitText}}</button>
</form>
Form The Json :
The translation objects are resolved from the file path and the structure of the json files is as below:
Forming the json in the files as the keys based upon the multilingual content you want. Say for example you are translating your content into two languages(en and fr) then the title would be formed as:
Output :
Here is the output of the login component as below :
Features
• Simple, Maintainable and Readable Translation Code.
• Lazy Load Translation Content Component Wise with Angular PreLoadModule Stratergy.
• Language Translation By URL or Code.
• FormControl Error Message Translation.
Powerful CLI with the features of Key Extraction, Optimize JSON, etc.
Fetch the implemetation of all the features of rxweb translate in the
docs
This article is published by ibidemgroup for spanish users
Top comments (2)
I am using ngx-translate (together with the BabelEdit-Translation editor) for a couple of my projects, but will definitely have a look at rxweb/translate.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.