Angular - Internationalization (i18n)

Internationalization (i18n) is a must required feature for any modern web application. Internationalization enables the application to target any language in the world. Localization is a part of the Internationalization and it enables the application to render in a targeted local language. Angular provides complete support for internationalization and localization feature.

Let us learn how to use Internationalization in Angular by creating a simple hello world application in different languages.

Internationalization in Angular

Follow the steps given below to enable internationalization in Angular:

Step 1: Create a new Angular application using below command −

ng new i18n-sample

Step 2: Navigate to the app folder using the given command −

cd i18n-sample

Step 3: Change the AppComponent's template as specified below −

<h2>{{ title }}</h2>

<div>Hello</div>
<div>The Current time is {{ currentDate | date : 'medium' }}</div>

Step 4: Add localize module using below command −

ng add @angular/localize

Step 5: The LOCALE_ID is the Angular variable to refer the current locale. By default, it is set as en_US. Let us change the locale by using useValue: 'hi' (for Hindi) in the providers array of app.component.ts. Import the locale data from @angular/common/locales/hi and then, register it using registerLocaleData method. Also, define a local variable named CurrentDate and set current time using Date.now() as specified below:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { LOCALE_ID } from '@angular/core';
import { DatePipe, registerLocaleData } from '@angular/common';
import localeHi from '@angular/common/locales/hi';

registerLocaleData(localeHi);

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, DatePipe],
  providers: [
    { provide: LOCALE_ID, useValue: 'hi' }  
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Internationalization Sample';
  currentDate: number = Date.now();
}

Step 6: Now run the application using ng serve command and check the result. You will see the date is specified using hi locale.

Finally, we have created a localized application in Angular.