Elegant Way to Implement Internationalization(i18n) in Angular

Here, we discuss the package of ‘ @rxweb/translate ’, which solves efficiently clumsy work of real-world Angular application on internationalization.

Background;

Before developing this package, I have used good open-source packages for Angular Internationalization in my enterprise projects. But somewhere I got stuck due to the not supported feature or design structure of the package library. As we are a developer and can do anything(Nothing is impossible) in the technology world :stuck_out_tongue_winking_eye:, like the same I did write lots of other codes to accommodate the application need related to internationalization. But on a larger level, the code looks a bit clumsy and difficult to understand, because there is no single source of truth that provides everything. Because I have to write the code in my multiple areas like writing some level of code on the template side by using pipe or directive and on TS code registering the providers on module level or component level and using the service for translation.

How it’s Elegant?

This package is designed by following the practices of Single Source of Truth. You can internationalize your application by following the two steps without knowing the additional understanding of binding the text on HTML template or content formatting programmatically. Seriously .

Let’s install the @rxweb/translate package.

npm install @rxweb/translate

Now, Let’s know more about the two simple steps.

After installing the package we have to register the RxTranslateModule in the main module of the application.

If you refer to the above code, I simply added the RxTranslateModule with the resolution path of my internationalization content JSON file.

Now the second step is to map a translate decorator on the respective component property where you want to get the internationalization object value. In our case, I am going to add this in the UserComponent .

As you can see the above code I have used translate decorator with the parameter of translationName . The translation name is the file name of JSON.

That’s it, All Done :smiley:.

On the HTML side, As I said earlier you don’t have to take the additional learning for binding the text on the UI. Use standard angular template syntax binding. like if I want to show the text of FullName :

{{multilingualContent.text.fullName}}

Whatever data is available in the JSON file, it will be available in the translate decorator mapped property while initializing the component.

Here is the JSON content of the English language.

If you like this approach, then definitely one question may arise; like-

How many:muscle: features are available?

• Resolve Component wise internationalization Content :ok_hand:.
• Lazy Loading Component Wise :rainbow:.
• URL based language change :+1:.
• Content Formating without writing extra code likewise you don’t need to pass the replace properties. If the scoped variable/object is defined in the component then it will be automatically formatted :astonished:.
• Shared Component wise content resolution .
• Global Content separation, like we need to show the alert message, validation message, etc those we can’t add each and every component for that global content feature is available :neutral_face:.
• Many more… :raised_hands:

Please refer to the discussed example stackblitz.

If you like the approach then you may like other articles on this package. Please refer to the below articles.

Feel free to post your comment below.