DEV Community

loading...
Cover image for Localization in Angular Applications using RxWeb

Localization in Angular Applications using RxWeb

ushmidave profile image Ushmi Dave ・4 min read

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 { }
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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}}
Enter fullscreen mode Exit fullscreen mode

Form The Json :

The translation objects are resolved from the global file path and the structure of the json files is as below:

Capture.PNG

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:

Json Keys

Output :

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(){

  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Form The Json :

The translation objects are resolved from the file path and the structure of the json files is as below:

Capture222.PNG

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:

Capture223.PNG

Output :

Here is the output of the login component as below :

article-translate.gif

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

Discussion (2)

pic
Editor guide
Collapse
heikokanzler profile image
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.

Collapse
vaclavhodek profile image
vaclavhodek

Awesome post. Thanks a lot!

It would work great with Localazy for managing localizable JSON files. It also has CLI for uploading/downloading files, so it can be nicely automated together.