Angular 12 Internationalization (i18n)

Angular Internationalization (i18n) is the process of creating a web application so that it can be utilized by different users in different locations around the world. To make your web application acceptable and accessible to users in different localities, you must create multiple versions that address the demands of consumers in each locale. You will have to: 

• Format your data for a certain location

• Translate the content of your web application into many languages.

Now that we've defined Internationalization let's look at how you can prepare your information for localization.

How to Make Your Content Internationally Relevant

Step 1: Create a new Angular Project with the Angular CLI. To keep things simple, skip the angular routing and instead use CSS as the project's stylesheet.

Step 2: Incorporate the localization package into your application.

To utilize the angular localization capabilities, you must first execute the "ng add @angular/localize" command on the CLI to add the @angular/localize package.

Step 3: Make your content available in several languages.

Let's start by updating the component files and adding the i18n characteristics. Angular supports these properties for localizing your content. You may also provide the meaning|description@@id where applicable. The meaning section reflects the context of the text messages, while the description section contains any additional information required by the translator to produce an appropriate translation. The "|" character then separates the content meaning from the content description.

The example below shows how you can localize your site content

<div>
<p i18n="Simple text  example@@message.simple">Hello world.</p>
<p i18n="Argument text example@@message.argument">Hello, {{ name }}!  </p>
<p i18n="Plural message example@@message.plural">{count, plural, one {{{count}} item} other {{{count}} items}}</p>
<p i18n="Gender text example@@message.gender">{gender, select, male {Mr {{ name }}} female {Mrs {{ name }}} other {Client {{ name }}}}</p>
<p i18n=" Format number text example@@message.number-format">Formatted number: {{ amount | number: ".2" }}</p>
<p i18n="Format date text @@message.date-format">Formatted date: {{ currentDate | date: "fullDate" }}</p>
<div>
<ng-container>{{ footerMessage }}</ng-container>
</div></div>

Now, update your component file to successfully display the above code on the template.

Step 4- Now run the command ng extract-i18n --output-path src/locale to extract the marked content

Step 5 –After extracting the source language file, and then translate the XLIFF files

Step 6-   Merge the translations into your web application

{ //some code here 
"projects": { 
"angular-i18n-example": { ... 
"i18n": { 
"sourceLocale": "en-US", 
"locales": { 
"fr": "src/locale/messages.fr.xlf" 
} }, 
"architect": { 
"build": { //some code here
"options": { 
"localize": true, 
"aot": true 
}, 
"configurations": { 
//some code here 
"en-US": { 
"localize": ["en-US"] 
}, 
"fr": { 
"localize": ["fr"] 
} }, //some code here }, 
"serve": { //some code here
"configurations": { 
... 
"en-US": { 
"browserTarget": "angular-i18n-example:build:en-US" 
}, 
"fr": { 
"browserTarget": "angular-i18n-example:build:fr" 
} }, //some code here }, //some code here } //some code here } //some code here } //some code here }

Step 7- Now add  your  language selection to  the switcher

import {Component} from '@angular/core';
interface Locale{
   localCode: string;
   labela;string;
}
//some code here
export class AppComponent{
   locales:Locale[] = [
   { locales: Locale[] =[
      {localeCode: 'en-US', label: 'English'},
      {localeCode: 'fr', label: 'French'},
      ];}]}

Step 8 – support all the RTL languages

import { Component, Inject, LOCALE_ID} from "@angulaer/core";
//some code here
export class AppComponent{
constructor(@Inject(LOCALE_ID) public locale: string) {}
// some code here
}