Locale switching in Angular

Introduction

Locale switching lets your app show text and formats in different languages or styles. It helps users feel comfortable by using their own language and date or number formats.

You want your app to support multiple languages for users worldwide.

You need to show dates, times, or numbers in the local style of the user.

Your app should let users pick their preferred language anytime.

You want to improve accessibility by adapting content to user locale.

You are building a global app that must respect cultural differences.

Syntax

Angular

import { LOCALE_ID, NgModule } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'fr' }
  ]
})
export class AppModule { }

You register locale data for the language you want to support.

LOCALE_ID tells Angular which locale to use for pipes like date and currency.

Examples

This sets the app locale to US English.

Angular

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

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'en-US' }
  ]
})
export class AppModule { }

This registers and sets Spanish locale for the app.

Angular

import { LOCALE_ID, NgModule } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';

registerLocaleData(localeEs);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'es' }
  ]
})
export class AppModule { }

This component shows the current locale and formats the date accordingly.

Angular

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

@Component({
  selector: 'app-root',
  template: `
    <p>Current locale: {{ locale }}</p>
    <p>{{ today | date:'fullDate' }}</p>
  `
})
export class AppComponent {
  today = new Date();
  constructor(@Inject(LOCALE_ID) public locale: string) {}
}

Sample Program

This Angular app sets the locale to French. It shows the current locale and formats the date in French style.

Angular

import { Component, NgModule, Inject, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr);

@Component({
  selector: 'app-root',
  template: `
    <h1>Locale Switching Example</h1>
    <p>Current locale: {{ locale }}</p>
    <p>Today is: {{ today | date:'fullDate' }}</p>
  `
})
export class AppComponent {
  today = new Date();
  constructor(@Inject(LOCALE_ID) public locale: string) {}
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: LOCALE_ID, useValue: 'fr' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Important Notes

Always register the locale data before using it to avoid errors.

You can change LOCALE_ID dynamically with more advanced techniques like injection tokens or services.

Locale affects pipes like date, currency, decimal, and percent.

Summary

Locale switching helps your app speak the user's language and show dates and numbers correctly.

Use LOCALE_ID and registerLocaleData to set up locales in Angular.

Locale affects built-in pipes and improves user experience worldwide.