Why @rxweb/ngx-translate-extension is intuitive than others ?

Tags: rxweb, angular, webdev, typescript
Published: 2020-06-15 17:45:14

# Background
Most of the angular developers must have faced a need to integrated so and so translation library to internationalize the angular application with lot of translation features 
But have you analyzed the <b>maintainability</b>, <b>simplicity</b> and <b>readability</b> of the code. How much <b>consistency</b> does the library provide while resolving the translation data. 

<b>Confused about how to compare ???</b>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s8kb58wruc9vhmqi62w3.jpg)


# Clean Code Comparison
Since there are a lot of translation libraries available for translation, RxWeb has compared more often used translation libararies
When we talk about clean code it includes verifying it at many steps right from the configuration to rendering it into the user interface

## How is it <b>different</b> from :
### Transloco:
<ul>
<li>No Compulsion to use `OnPush` change detection stratergy</li>
<li>No to Impure Pipes, Method, Attribute Directive, Using the Simple Object property for binding the multilingual text</li>
<li>One Time Configuration through out application</li>
<li>Zero Multiple package dependency</li>
<li>Zero Subscription for Language Change or other necessary things.</li>
<li>Not required to use `ng-container` for resolving multiple translations.</li>
<li>Template Code is much simple, as there is no need to pass the parameter for translate text interpolation or write the conditional code in the HTML template.</li>
</ul>

### Angular-L10n:
<ul>
<li>Zero Subscription.</li>
<li>Pure Pipe works well without passing the Language Code as additional parameter.</li>
<li>Binds the FormControl Error Messages without using the Pipes.</li>
</ul>

### Angular-I18next
<ul>
<li>No need to set the additional configuration on Routes.</li>
<li>Automatically Format the Text without passing the parameters or formatter name in HTML template.</li>
</ul>

## How this is more intuitive in terms of <b>Clean Code</b>?
As RxWeb follows best design practices and approach to use clean code. Here are some glimpes of some of the basic features provided by its translation library. 

### Simple Translation
This is the one of the most beautiful feature 🙃 of the library relies on the Angular interpolation for displaying a localized text in the respective view template with double curly braces syntax.  Have a look at the code 👇

<b>Component:</b>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uexil6iiz3cpeddtx6bt.PNG)
<b>Html:</b>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kngajnxq93ju7t3fgqfj.PNG)



<b>Json:</b>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kbt7n76wis3j5gacpsbl.PNG)

### Component Scoped Binding with Translation
We use Angular interpolation for Component Scoped Property Binding with translation text, This gives fantabulous 😲 solution of the problem of writing the little lines of business logic in the template and with this way the template is much clear.

<b>Html:</b>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2654ai5dfz6ojvuju5vq.PNG)

<b>Json:</b>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9t6epo22nk7dbqc40goc.PNG)

### Conditional Scoped Translation

One of the richest feature of the library 😍, which gives complete felxibility to run the translation property string code same as same as existing component scoped method. 

<b>Component:</b>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iq7ol61canb1nqkz7ran.PNG)

<b>Html:</b>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h5a2q6dwe4zn7x6bicwk.PNG)



<b>Json:</b>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6pheccgt6zucnbv206g8.PNG)

This library with lot of other translation features can be installed using [npm](https://www.npmjs.com/package/@rxweb/ngx-translate-extension). This is an extensive library of ngx-translate, have a look at all other [features](https://docs.rxweb.io/ngx-translate-extension/en/playground).