Unlock Multi-Language Power: Angular Localization Tips

Amit Verma . 24 May 2024
Share on Social meadia
Subscribe for future update
Subscribe

Angular Localization: Implementing Multi-Language Support in Your Application


Introduction:

Thorough manual design to assist developers in adding multilingual support to Angular apps is called Angular Localization. With the help of this Blog, you will be able to show content in different languages by using the i18n library in your Angular project. This blog covers all the steps to make your Angular project work properly without any error, from setting up the json files and translated language files.

Setting up the Angular Project:

1. Install Angular:

- Install Angular by using command.

'npm install -g @angular/cli'


2. Create new Angular project:

'ng new i18n-localize'


3. Run the application using command:

'ng serve --open'


Configuring Localization:

1. Install a localize package:
  • After you’ve made sure everything is working, stop the server and install a localized package.
  • This package will add internationalization support to the project.
  • Install by running a command.

‘ng add @angular/localize’


2. Next We’ll need to modify it in the angular.json file. add relevant lines here:
  • See highlighted part of code.
Note:. . . means (The other options are omitted)
// <-- means (The given number shows the steps should be edited in your project)


Changes we done in the above angular.json file.

  • Adding the ‘i18n’ section, under the project configuration.
  • Setting the source of the application to ‘en-US’.
  • Adding support for other locales.
  • If you would like to translate the app into Russian use ‘ru’ locale. You can add other language locales also like ‘fr’ for French, ‘hi’ for Hindi.
  • Set ‘localize’ to ‘true’ to generate application variants for each locale.
3. Write a code in component.html file:
  • Replace the content with the following line of code.

  • i18n is an attribute of the localize package, and the tag content will be replaced with the proper translation. The attribute contain translation metadata like:

  • Also you can use pipe to describe the heading and description separately.


Translating Content

1. Creating translation file:
  • There is a command which extracts the translations to a separate file.
  • Make changes in the angular.json file in ‘extract-i18n’ section as given below.

2. Extracting translations:
  • To create translation file run a command:
  • ‘ng extract-i18n’


  • the locale folder will get generated in src.
  • In the locale folder, you will find a messages.xlf file. This is the base translation file with following contents:
i.e.

  • Make a duplicate of messages.xlf file and rename that duplicated file as the name of language messages.fu.xlf. This renamed file is going to store French language translation.

  • offshore
  • Add a tag immediately after the tag in the as follows:
  • Also provide target-language attributes for the so the translation management system can detect the locale properly, as shown below.
i.e.

3. We’ll add some configuration within the angular.json file.
  • Add new configuration for the fr locale, means for French translation.
i.e.

4. Run this command to see the output of translated language:

‘ng serve —configuration=fr —open’.


locale instead of ‘fr’ you can also add ‘ru’ , for French Language and ‘hi’ for Hindi Language.

Also read- Progressive Web Apps vs Native Apps: What to Choose in 2024

Conclusion :

Angular applications require the implementation of multi-language support. Software Developers may quickly make their application. available to the client including various languages using the built-in localization library of Angular. In this blog, we have learned how to use the i18n library to enable multi-language support in an Angular application.

THE AUTHOR
Amit Verma
Software Developer

Read more blogs

Time and Cost of Developing an AI like ChatGPT: Key Factors Explored

Explore the factors influencing the time and cost of developing an AI model like ChatGPT. Understand key considerations for successful AI ap

Amit Verma

Guide to Successful Real Estate App Development: Features, Technologies, and More

Explore the advantages of developing a real estate app, key features, technologies to employ, and the importance of collaborating with a Rea

Amit Verma

Custom vs. Template-Based Website Development: A Comprehensive Cost Comparison Guide

Explore the costs, pros, and cons of custom website development vs. template-based solutions. Make an informed decision for your online pres

Amit Verma