How To Handle Internationalization & Localization in Angular Data Grids?

When it comes to creating software that reaches a global audience, two essential processes come into play - Internationalization (i18n) and Localization (l10n). Though often used interchangeably, these terms refer to two different processes. 

In this article, we’ll cover the fundamentals of internationalization and localization, providing a step-by-step example of setting up a localized Angular application, as well as practical approaches for using Ignite UI for Angular to create multilingual data grids. 

So, let’s dive in. 

What Is Internationalization? 

Internationalization (i18n) is typically carried out by developers and engineers who design the codebase to support multiple languages and regional settings without having to do major restructuring to add languages later on. User-facing text is replaced with placeholders, which the system interprets based on different configurations for each language. Additionally, support for Unicode character encoding and left-to-right writing systems should be planned for. 

What Is Localization? 

Localization customizes the application for specific language and culture. This process includes translating text and adjusting data formatting, such as dates, times, numbers, and currencies, to suit local conventions. Localization specialists translate and adapt the content of the components to create an experience that feels natural for each audience.

Internationalization and localization go hand-in-hand: internationalization builds flexibility, while localization adapts it for individual users.  

Why i18n & l10n Are Important? 

Internationalization and localization are essential for any application aimed at a global audience. Most users prefer content in their native language, with familiar formats for data. This improves usability and user experience, allowing applications to cater to diverse audiences across different regions and helps a business expand into new international markets and grow. 

Internationalization in Angular 

Angular has built-in internationalization (i18n) features that make it easier to manage multilingual applications. It allows developers to translate static content and handle locale-based formatting more easily. 

Enable i18n in an Angular Project 

Let’s look at the example below to see how to set up localization in an Angular app. 

Step 1: Set Up Your Angular Project 

Install Angular CLI  

npm install -g @angular/cli 

Create a New Angular Project:  

ng new translation-example --style=css --routing=false --skip-tests 
cd translation-example 

Add the Localize Package:  

ng add @angular/localize 

Step 2: Prepare Your App for Internationalization 

Open angular.json and configure the locales section under your project. We’ll be configuring it for Korean and Japanese. 

"projects": { 
  " translation-example": { 
    "i18n": { 
      "sourceLocale": "en", 
      "locales": { 
        "ko": "src/locale/messages.ko.xlf", 
        "ja": "src/locale/messages.ja.xlf" 
      } 
    },  

 

Step 3: Mark Text for Translation 

Open the src/app/app.component.html file and modify it to include translation attributes – the i18n tag: 

<h1 i18n="@@helloWorld">Hello World</h1> 

You can also style the page however you want in the .css file

Step 4: Extract Translations 

ng extract-i18n 

This command creates a file named messages.xlf in the src folder.

Step 5: Create Translation Files 

Create a locale folder in the src directory: mkdir src/locale 

Copy the messages.xlf file to create translations for Korean and Japanese: 

cp messages.xlf src/locale/messages.ko.xlf 
cp messages.xlf src/locale/messages.ja.xlf 

Edit the files to include translations 

messages.ko.xlf file:

 <trans-unit id="helloWorld" datatype="html"> 
  <source>Hello World</source> 
  <target>안녕하세요 세계</target> 
</trans-unit> 

 

Step 6: Build the Application with Locales 

define the production configuration in angular.json to include the localization settings 

 "configurations": { 
           "production": { 
            "localize": true, 
    … 
    }

 

run the command: 

ng build --configuration=production --localize 

This will generate a separate build for each locale defined in your project (en, ko, ja), creating language-specific folders in your dist directory. After the build, you should see subdirectories within dist/translation-example 

That’s pretty much it. Now when you run the application, you will have the translated pages under different addresses, simple as that.

Localization in Angular Grids 

When localizing data grids in Angular applications, the focus extends beyond simple text translation. Data grids are typically used to display dynamic data, so localization must adapt to various elements, such as numeric formats, date and time presentation, currency symbols, and culturally relevant sorting and filtering options. 

• Date and time localization can vary significantly between regions. For instance, the format MM/DD/YYYY is common in the U.S., while DD/MM/YYYY is standard in many European countries or YYYY/MM/DD in Japanese culture.
• Number formatting, including decimal and thousands of separators, differs widely across locales. For example, while English-speaking countries often use 1,000.00, other regions might display it as 1.000,00.  
• Languages like Arabic and Hebrew are read from right to left, which can affect the data grid layout.
• Alphabetical sorting can vary based on locale due to unique character sets and accents in languages like French or German. 

Ignite UI for Angular Grid - A Grid Designed for Global Reach 

Ignite UI for Angular Grid provides built-in features to support localization, enabling developers to present data in a way that is culturally and linguistically appropriate for users. This includes formatting dates, numbers, and currencies according to regional settings, which enhances the user experience and usability of your application. The Angular Grid is engineered to help developers seamlessly deliver localized data experiences for global audiences. 

Our grid offers out-of-the-box resource strings for over 20 languages, including French, Japanese, Spanish, and many more. These are available via the igniteui-angular-i18n package, except for English, which is the default localization in igniteui-angular. By leveraging the igniteui-angular-i18n package, developers can load and apply these language packs in just a few steps, creating a customized, culturally accurate interface.

While Ignite UI supports a broad array of languages, it also allows for easy customization, so you can define your localized resources if a language isn't available. This flexibility ensures that the grid aligns precisely with the linguistic and cultural nuances of your audience.

With Ignite UI, date and number formatting, currency symbols, and other critical data representations are localized automatically. By importing the necessary resource strings or creating custom language packs, developers can quickly enhance the usability and appeal of their applications on a global scale.

Explore Ignite UI for more details on i18n and localization options.