Build Angular 13 MultiLingual i18n App with NGX Translate

Angular MultiLingual site tutorial, in this guide, you will discover how to create a simple web site in multiple languages using the ngx-translate package.

The ngx translate is an internationalization library specially built for the angular platform.

It offers a swift solution for translating web application content in multiple languages, and you can comfortably switch the languages of your application within seconds.

NGX-Translate package is immaculately dynamic, which offers you service, directive.

Similarly, a pipe to manage content statically or dynamically, although it has everything for you to translate an angular app for the choice of your favorite language.

Nonetheless, if you don’t find anything to create your site in multi-language, you can also go for custom integration that suits your need.

The internationalization (i18n) localization process is meant to build a digital product or web application to be utilized or assimilated across various countries.

Often companies internationalize their web or mobile application to increase their product reach. Notwithstanding, internationalization is also associated with economics, through which companies extend their presence to the global market.

Angular 13 Internationalizaiton (i18n) Multi Language Site Example

  • Step 1: Set Up Angular Environment
  • Step 2: Install Translate Package
  • Step 3: Register Translate Modules
  • Step 4: Create Translation Files
  • Step 5: Implement Internationalizaiton in Angular
  • Step 6: Test Angular App

Set Up Angular Environment

In the initial stage, we need to lay the foundation of angular, hence execute recommended command to install angular CLI.

npm install -g @angular/cli

If you are a novice developer and don’t know how to install an angular app, then run the provided command:

ng new angular-multi-language-demo

Let us get inside the app’s root:

cd angular-multi-language-demo

We need to install the Bootstrap package to create a ready-made form, apparently use the provided command:

npm i bootstrap

Head over to angular.json, update the styles array with the Bootstrap path:

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

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Install Translate Packages

Installing the translate package is easy; however, you have also to add the http loader package that supports getting the translation files from a remote server.

npm i @ngx-translate/core

npm i @ngx-translate/http-loader

Register Translate Modules

Subsequently, you have to register translate modules (HttpClient, HttpClientModule, TranslateLoader, TranslateModule, TranslateHttpLoader, ) in app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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

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



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

export function translateFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

Plus, define the translateFactory() export method and pass the HttpClient as an argument and return http in new TranslateHttpLoader() instance.

Create Translation Files (English and Japanese)

In this step, you will find out how to create translation files, so create the i18n directory in the assets folder.

Inside the assets/i18n/ folder, you have to create files that need to be translated, make sure you name them based on the country code, and grab the country code from here.

As per the localization from English to Japanese, create en.json and ja.json files based on the international country codes for internationalization.

Open assets/i18n/en.json file, update the below code:

{
  "Title": "Angular Translation Example",
  "Name": "Name",
  "Email": "Email",
  "Mobile": "Mobile",
  "Update": "Update",
  "Error": "Please provide required details."
}

Open and update assets/i18n/ja.json file with provided code:

{
  "Title": "角度変換の例",
  "Name": "名前",
  "Email": "Eメール",
  "Mobile": "モバイル",
  "Update": "更新",
  "Error": "必要な詳細を提供してください"
}

Implement Internationalizaiton in Angular

At the top, import the TranslateService from the ‘@ngx-translate/core’ package, inject it into the constructor method. Not only but also, mention the languages in the addLangs() method along with that set the default language, which is English in our case.

The translateSite() method switches the languages with the help of the use() method.

Open app.component.ts and update the provided code in the file:

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 translateService: TranslateService) {
    translateService.addLangs(['en', 'ja']);
    translateService.setDefaultLang('en');
  }

  translateSite(langauge: string) {
    this.translateService.use(langauge);
  }

}

Create the basic form using the Bootstrap form component, and it reduces the pain of writing CSS for the form layout.

Add the form values that need to be translated in the double curly brackets; also, use the translate pipe to localize the language.

The select dropdown helps to change the languages, attach a custom method to translate the site.

Open app.component.html and update the provided code in the file:

<nav class="navbar navbar-dark bg-dark mb-5">
  <div class="container">
    <a class="navbar-brand">
      {{'Title' | translate }}
    </a>
    <span class="form-inline">
      <select class="form-control" #langauge (change)="translateSite(langauge.value)">
        
        <option *ngFor="let localization of translateService.getLangs()" [value]="localization"
          [selected]="localization === localization.currentLang">
          {{ localization }}
        </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">{{'Error' | translate}}</small>
    </div>

    <div class="form-group">
      <label>{{'Email' | translate}}</label>
      <input type="email" class="form-control">

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

    <div class="form-group">
      <label>{{'Mobile' | translate}}</label>
      <input type="tel" class="form-control">

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

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

Test Angular App

Eventually, every thing has been placed under the hood now invoke the angualr applicaiton using the provided command:

ng serve

Use the url to run the app on localhost:

http://localhost:4200

Angular Internationalizaiton (i18n) Multi Language Site

Conclusion

The angular Internationalization tutorial is over; you managed to translate an angular app in multiple languages with gravitas.

We have gradually and concurrently followed all the steps to localize the app in English and Japanese languages with the ngx-translate package’s help.

I reckon you will appreciate this detailed guide and will share it with others.