Angular i18n: Methodical Way to Lazy Load Component-Based Translation

Here we are going to understand that real-world problem solution for component-based content translation in Angular.

we use @rxweb/translate package for lazy load component-based translation with less code.

Note: if you don’t know anything about this package then I would suggest please refer the article of “Elegant Way to Implement Internationalization in Angular” for knowing more about the package and features.

Let’s quickly discuss the real-world problems and methodical solution in step by step manner.

As usual, before moving forward we must install the package and set the JSON files according to our application need.

npm install @rxweb/translate

Above is the installation command and I hope you have an understanding of JSON file structuring, if not then please refer to this article: “Angular i18n: Content Translation based upon URL”.

Now we have to register RxTranslateModule in the root module.

Let’s consider a functional requirement of the User Registration page which contains two fields Email and Password. The page component will be resolved based upon the URL.

To achieve this we have to create the UserComponent and use the translate decorator on multilingualContent property.

Let’s quickly finish this thing as I have already shared detailed information in this article “Angular i18n: Content Translation based upon URL”.

Here is the small code snippet of HTML, which states that how we can use multilingualContent property in the HTML.

Now the client is having a requirement that he wants to Address section in the User Registration page and keep in mind that this section can be used in multiple pages like Customer Registration, Candidate Registration, etc.

This is the best case of Shared Component in the Angular. We can achieve this by creating a shared component.

So let’s create a AddressComponent and map the translate decorator on the component property.

As we have created the component and mapped the translate decorator on the multilingualContent property, but there is one question 😃 🌈 😅:

Which name we have to pass in the translationName parameter of translate decorator Because this is a shared component and it will be used in many components?

As such, there is no difference between route components or share components for managing the translation. The implementation approach and JSON file structure the same. Every shared component has a separate JSON file.

One thing we have to apply on the component element which is a rxTranslate directive. The rxTranslate directive will resolve the content before initializing the component.

Here is HTML code.

Here is the result of so far designed HTML.

There is one another requirement. We have to create a shared component of the Comment Section but the language will not be changed other than English. If the user preferred language is French then also the comment section content must be in English format.

Whatever we have understood so far nothing will be changed in this case. We have to pass languageCode value in the translate decorator.

Here is the CommentComponent Code.

Other things remain the same.

Here is the output.

What about the Internationalize Content Formatting programmatically?

Please below article to know more about content formatting.

Angular i18n: Simplified Way to Format Content Programmatically

Here is the stackblitz example of this article.

rxweb-translate-lazy-load-component-based - StackBlitz

I hope you liked the approach of the package. Feel free to share your comments below.