Mastering Angular i18n: A Step-by-Step Guide to Setting Locales

Setting Up Angular i18n

Before we dive into setting locales, make sure you have Angular i18n installed and configured in your project:

ng add @angular/localize

This command will install the necessary dependencies and configure Angular i18n in your project.

Creating a Locale Configuration File

Next, create a new file called `locale.config.ts` in your project’s root directory:

touch locale.config.ts

In this file, add the following configuration:

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

registerLocaleData(localeEn, 'en');
registerLocaleData(localeFr, 'fr');

This configuration registers the English (en) and French (fr) locales. You can add more locales as needed.

Setting the Default Locale

In your `app.module.ts` file, add the following code to set the default locale:

import {LOCALE_ID} from '@angular/core';
import {localeConfig} from './locale.config';

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'en' } // Set the default locale to English
  ]
})
export class AppModule {}

This code sets the default locale to English (en). You can change this to any locale you prefer.

Using the Locale Service

The Locale Service provides a way to switch between locales programmatically. Create a new service called `locale.service.ts`:

import {Injectable} from '@angular/core';
import {LOCALE_ID} from '@angular/core';
import {localeConfig} from './locale.config';

@Injectable({
  providedIn: 'root'
})
export class LocaleService {

  private locales = localeConfig;

  constructor(@Inject(LOCALE_ID) private locale: string) { }

  setLocale(locale: string): void {
    this.locales[locale].load();
  }

  getLocale(): string {
    return this.locale;
  }

}

This service provides a way to set and get the current locale.

Switching Between Locales

To switch between locales, create a component with a dropdown list of available locales:

<select (change)="localeService.setLocale($event.target.value)">
  <option *ngFor="let locale of localeService.locales | keyvalue" [value]="locale.key">{{ locale.key }}</option>
</select>

This code uses the `LocaleService` to switch between locales when the user selects a new option.

Format Dates and Times

Angular i18n provides a set of pipes to format dates and times according to the current locale. Use the `date` pipe to format dates:

<p>Today is {{ today | date : 'shortDate' }}</p>

This code formats the current date using the short date format (e.g., 2023-02-16).

Format Currencies and Numbers

Use the `currency` and `number` pipes to format currencies and numbers according to the current locale:

<p>Price: {{ price | currency : 'EUR' }}</p>
<p>Quantity: {{ quantity | number }}</p>

This code formats the price using the Euro currency symbol (€) and the quantity using the default number format.

Using Localization IDs

In addition to formatting dates, times, currencies, and numbers, you can use localization IDs to provide translated content. Create a new file called `translations.json`:

{
  "en": {
    "hello": "Hello!",
    "goodbye": "Goodbye!"
  },
  "fr": {
    "hello": "Bonjour!",
    "goodbye": "Au revoir!"
  }
}

This file contains translated content for English and French.

Using the Translate Pipe

Use the `translate` pipe to display translated content:

<p>{{ 'hello' | translate }}</p>

This code displays the translated “hello” message according to the current locale.

Conclusion

And that’s it! You now have a comprehensive guide to setting locales in Angular i18n. By following these steps, you can provide a seamless user experience for your global users. Remember to adapt to local preferences, format dates, times, currencies, and numbers, and use localization IDs to provide translated content.

Don’t forget to explore the official Angular i18n documentation for more advanced features and customization options. Happy coding!

1. Angular i18n Official Documentation
2. Angular CLI i18n Wiki

Frequently Asked Questions

Get ready to dive into the world of Angular i18n and set locales like a pro!