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.

Example - 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 App Component's template as specified below −

app.html

<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:

app.ts

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

registerLocaleData(localeHi);

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

Output

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.