Localization in Angular Applications using RxWeb

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 theTranslateModule 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

Comments

[Heiko Kanzler 🇪🇺]

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.