How To Implement Angular Multi-Language Support

In this blog, we will see how to implement angular multi-language support. However, before we start, we should know about two terms, i.e., Internationalization and Localization.

So, Angular introduced internationalization which is also referenced as i18n. It is the process of designing and preparing our project for use in different locales worldwide.

Localization is the process of building our project for different locales. The localization process includes the following:

•  Extract text for translation into different languages. 
•  Format data for a specific locale.

👉 NGX-Translate is an internationalization library for Angular. It allows us to internationalize our angular app in multiple languages.

👉 We can easily convert static or dynamic data into various languages. Moreover, it provides us with a useful service, a directive, and a pipe to manipulate data.

Step-1: Create An Angular Application By Hitting The Command

ng new angular-translation

Head over to the project

cd angular-translation

Step 2: Let’s Create A Basic Form. So Let’s Install The Bootstrap Package By Hitting The Command

npm install bootstrap

Add the Bootstrap CSS path in styles array inside the angular.json file.

"styles": [
    "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Step 3: Adding Ngx-Translate

Hit the command to install the ngx-translate packages in the angular application.

npm i @ngx-translate/core --save

npm i @ngx-translate/http-loader --save

The @ngx-translate/core package includes the essential services, pipe, and directives, to convert the content in various languages.

The @ngx-translate/http-loader service helps in fetching the translation files from a web server.

Step 4: We Need To Import And Register The TranslateModule In The app.module.ts File

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

import { BrowserModule } from '@angular/platform-browser';


import { AppComponent } from './app.component';

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { HttpClient, HttpClientModule } from '@angular/common/http';

@NgModule({

 declarations: [

   AppComponent

 ],

 imports: [

   BrowserModule,

   HttpClientModule,

   TranslateModule.forRoot({

     loader: {

       provide: TranslateLoader,

       useFactory: httpTranslateLoader,

       deps: [HttpClient]

     }

   })

 ],

 providers: [],

 bootstrap: [AppComponent]

})

export class AppModule { }

// AOT compilation support

export function httpTranslateLoader(http: HttpClient) {

 return new TranslateHttpLoader(http);

}

We can easily create our loader, which can be done by implementing the TranslateLoader interface and providing it in AppModule. The httpTranslateLoader function is needed during our project’s build phase (AOT).

Step 5: Configure Translation Files

• Open the assets folder and create an “i18n” folder.
• In the “i18n” folder, add language.json files along with the country code.

We can add as many languages as you want in the i18n folder. A translation file is just another JSON file. We have to define the language’s data in key-value pairs format in this file.

In our project, we have implemented English, Hindi, Marathi and Dutch languages.

To configure the translation loader, we created the language.json file based on the languages we want to translate. Then, added the language code instead of the language. For instance, if our language is English, this will become en.json.

Check out here to learn more about the i18n country codes.

Step 6: Add the English (en) values in key-value pair format in the src/assets/i18n/en.json file

{
   "Sitetitle": "Angular Multi Language Site",

   "Name": "Name",

   "NameError": "I am sure you must have a name!",

   "Email": "Email address",

   "PhoneNo": "Phone No",

   "Password": "Password",

   "Bio": "Enter bio",

   "TermsConditions": "I agree to terms and conditions.",

   "Submit": "Submit"
}

Similarly, add the Hindi (hi) values in key-value pair format in the src/assets/i18n/hi.json file.

{
   "Sitetitle": "कोणीय बहु भाषा साइट",

   "Name": "नाम",

   "NameError": "मुझे यकीन है कि आपके पास एक नाम होना चाहिए!",

   "Email": "ईमेल",

   "PhoneNo": "फोन नंबर",

   "Password": "पासवर्ड",

   "Bio": "अपने बारे में जैव",

   "TermsConditions": "मैं नियमों और शर्तों से सहमत हूँ",

   "Submit": "प्रस्तुत"
}

Similarly, add the Marathi (mr) values in key-value pair format in the src/assets/i18n/mr.json file.

{
   "Sitetitle": "कोनीय मल्टी लँग्वेज साइट",

   "Name": "नाव",

   "NameError": "मला खात्री आहे की तुमचे नाव असले पाहिजे!",

   "Email": "ईमेल",

   "PhoneNo": "दूरध्वनी क्रमांक",

   "Password": "पासवर्ड",

   "Bio": "बायो एंटर करा",

   "TermsConditions": "मी अटी व शर्ती मान्य करतो",

   "Submit": "प्रस्तुत करणे"
}

Similarly, add the Dutch (nl) values in key-value pair format in the src/assets/i18n/nl.json file.

{
   "Sitetitle": "Hoekige site met meerdere talen",

   "Name": "Naam",

   "NameError": "Ik weet zeker dat je een naam moet hebben",

   "Email": "E-mailadres",

   "PhoneNo": "Telefoon nr",

   "Password": "Wachtwoord",

   "Bio": "Voer bio in",

   "TermsConditions": "Ik ga akkoord met de voorwaarden.",

   "Submit": "voorleggen"
}

Step 7: Implementing Translations With TranslateService

 In this step, we will implement translations, Import TranslateService in app.component.ts file.

import { TranslateService } from '@ngx-translate/core';

Next, inject TranslateService in the constructor. It allows us to access the translation service’s methods.

export class AppComponent {

 constructor(

   public translate: TranslateService

 ) {

   translate.addLangs(['en', 'nl','hi','mr']);

   translate.setDefaultLang('en');

 }

}

By setting up the translate.addLangs([‘en,’ ‘nl’]) method, we inform the service what languages need to be translated.

We defined the translate.setDefaultLang(‘en’) method and passed the English language as a fallback translation, especially for the missing translations scenario for existing languages.

The language parameters here are the ones we defined with the JSON file. These parameters are the building bridge to make our site multi-language supportable.

Step 8: Adding Language Switcher

To change the language of our Angular app, we will implement a simple dropdown and create a switchLang() function.

This function takes a single language parameter, and on changing the value of the dropdown, we will call this.translate.use(lang) method to change the language of the site.

We will bind switchLang() to a select dropdown; this simple select dropdown will have the language list and translate the site content based on the user’s language preference.

switchLang(lang: string) {

   this.translate.use(lang);

 }

Step 9: Configure Translations With Translate Pipe

We have a user object defined in the en.json,hi.json,mr.json and nl.json file. With the help of a translate pipe, we will translate our Angular app.

In the {{‘Sitetitle’ | translate }} double curly braces, we pass the first value as the same value as we defined in the .json file. The second value is the TranslatePipe | translate to internationalize with ngx-translate.

Here’s the HTML code,

<nav class="navbar navbar-dark bg-dark">

 <div class="container">

   <a class="navbar-brand">

     {{'Sitetitle' | translate }}

   </a>

   <span class="form-inline">

     <select class="form-control" #selectedLang (change)="switchLang(selectedLang.value)">

       <option *ngFor="let language of translate.getLangs()" [value]="language"

         [selected]="language === translate.currentLang">

         {{ language }}

       </option>

     </select>

   </span>

 </div>

</nav>

<div class="container">

 <form>

   <div class="form-group">

     <label>{{'Name' | translate}}</label>

     <input type="text" class="form-control">

     <small class="text-danger">{{'NameError' | translate}}</small>

   </div>

   <div class="form-group">

     <label>{{'Email' | translate}}</label>

     <input type="email" class="form-control">

   </div>

   <div class="form-group">

     <label>{{'PhoneNo' | translate}}</label>

     <input type="tel" class="form-control">

   </div>

   <div class="form-group">

     <label>{{'Password' | translate}}</label>

     <input type="password" class="form-control">

   </div>

   <div class="form-group">

     <label>{{'Bio' | translate}}</label>

     <textarea rows="3" class="form-control"></textarea>

   </div>

   <div class="form-group form-check">

     <input type="checkbox" class="form-check-input">

     <label class="form-check-label">{{'TermsConditions' | translate}}</label>

   </div>

   <button type="submit" class="btn btn-block btn-danger">{{'Submit' | translate}}</button>

 </form>

</div>

Here’s the ts code,

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    public translate: TranslateService
  ) {
    translate.addLangs(['en', 'nl','hi','mr']);
    translate.setDefaultLang('en');
  }

  switchLang(lang: string) {
    this.translate.use(lang);
  }
}

Step 10 : Run The Application By Hitting The Command

ng serve

Here’s the final output!!

Related Read : How To Implement React Native Multi Language Support