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 newi18n-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'})exportclassAppComponent{
  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.