Angular Internationalization (i18n) and Localization (l10n)

Introduction:

As web applications expand their global reach, catering to users from diverse linguistic backgrounds becomes crucial. Angular, being a robust framework, provides excellent support for internationalization (i18n) and localization (l10n). In this blog post, we will explore the concepts of i18n and l10n in Angular, understand their significance, and provide practical examples to help you implement multi-language support in your Angular applications.

If you want to learn about a new feature of angular, you can refer here.

1. Internationalization (i18n) in Angular:

Internationalization refers to the process of designing and developing applications in a way that allows easy adaptation to different languages and cultural conventions. Angular’s i18n feature helps you achieve this by enabling the extraction and translation of text within your application.

To begin with i18n in Angular, you need to follow these steps:

Step 1:
Marking Text for Translation: In your HTML templates, enclose the text that requires translation within Angular’s i18n tags, as shown below:

<p i18n>Hello, World!</p>

Step 2:
Extraction: After marking the text, use the Angular CLI’s ng extract-i18n command to extract the marked strings into a translation file.

Step 3:
Translation: Translate the extracted strings in the generated translation file, which uses the .xlf (XML Localization Interchange File Format) format. You can provide translations for different languages.

Step 4:
Compilation: Once the translations are completed, use the ng build --i18n-file=path/to/messages.xlf --i18n-format=xlf command to compile the application with the translations included.

2. Localization (l10n) in Angular:

Localization refers to the process of adapting an application to a specific language or locale. Angular’s l10n feature allows you to customize your application’s behavior based on the user’s locale, including date formats, number formats, and more.

Here’s an example of using localization in Angular for date formatting:

Step 1:
Importing Locale Data: In your app.module.ts file, import the necessary locale data:

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr, 'fr');

Step 2:
Setting the Locale: In the component where you want to use localized settings, set the locale:

import { Component, LOCALE_ID } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p>Today's date: {{ today | date }}</p>
  `,
  providers: [{ provide: LOCALE_ID, useValue: 'fr' }]
})
export class AppComponent {
  today: Date = new Date();
}

In the above example, we imported French locale data and set the locale to ‘fr’. The date pipe will format the date according to the French locale.

3. Changing Language at Runtime:

Angular provides the LOCALE_ID token to switch between different locales at runtime. You can utilize this token to change the language dynamically based on user preferences.

Here’s an example of language switching:

<select (change)="changeLocale($event.target.value)">
  <option value="en">English</option>
  <option value="fr">French</option>
</select>

In the component class, implement the changeLocale() method:

changeLocale(locale: string): void {
  this.localeService.setLocale(locale);
}

In the locale.service.ts file, create the setLocale() method to update the locale dynamically:

import { Injectable } from '@angular/core';
import { LOCALE_ID, Inject } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocaleService {
  constructor(@Inject(LOCALE_ID) private localeId: string) {}

  setLocale(locale: string): void {
    this.localeId = locale;
  }
}

Conclusion:

Angular’s i18n and l10n features make it effortless to create multi-language applications, ensuring a localized experience for users worldwide. In this blog post, we covered the concepts of internationalization and localization in Angular and provided practical examples for implementation. By following these guidelines, you can easily incorporate language translation and locale-specific formatting into your Angular applications, empowering users from various cultural backgrounds. Embrace the power of i18n and l10n in Angular, and open up your applications to a global audience. Happy coding!

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.