Localization in Angular Applications using RxWeb
Tags: rxweb, angular, typescript, webpack
Published: 2020-11-19 05:58:37

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](https://www.npmjs.com/package/@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:
```js
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:

```js
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:
```js
{{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:

![Capture.PNG](https://ucarecdn.com/2ffe6ec9-ee99-475c-9838-81fda9140104/)

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](https://dev-to-uploads.s3.amazonaws.com/i/sjpiybszly41zb5u61tl.PNG)

### Output :

![Output](https://dev-to-uploads.s3.amazonaws.com/i/3bxggzsrrr5sk6jjnukn.gif)

Here is the output of the above code. A complete basic example can be viewed on [stackblitz](https://stackblitz.com/edit/rxweb-static-translation-a1ph9y?file=src%2Fapp%2Fglobal%2Fglobal.component.ts)

## 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
```js
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:
```js
<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:
​
![Capture222.PNG](https://ucarecdn.com/03cefb65-c10d-4c53-ae3d-376e480890d9/)
​
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](https://ucarecdn.com/1d6f8b31-df6f-4b9b-a568-d6a6967bb907/)

### Output :
Here is the output of the login component as below :

![article-translate.gif](https://ucarecdn.com/090db5bc-4110-414b-93ab-29ac4ec247e4/)


# 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](https://www.npmjs.com/package/@rxweb/translate#binding)

This article is published by [ibidemgroup](https://www.ibidemgroup.com/edu/traduccion-angular-rxweb/) for spanish users