Multi Language Application In Angular

Introduction

As we know, nowadays clients want applications not only in the English language, but also in their own language, if they don't know Englisjh.

So it's very important for software engineers to know how to develop applications in multiple languages.

So I have decided to write an article on Multi Language Applications in Angular.

In this article we will try to learn step by step demonstration how to create this with a step by step demonstration.

As we know Angular is a complete java script language framework.

NGX-Translate is provided, and used for internationalization library for Angular. With the help of this we will internationalize the Angular app in multiple languages.

What is Internationalization?

Internationalization is the process of designing and preparing your app to be usable in different languages.

Localization is the process of translating your internationalized app into specific languages for particular locales.

– angular.io

In this article I will try to cover following things,

Prerequisites
Create Angular App
ngx-translate
TranslateService
Language Switcher
TranslatePipe

Prerequisites

Angular CLI
Latest version of Node and NPM
Any IDE, For example VS Code, or Visula Studio

Create Angular App

Before creating your new application you can check your angular CLI version and node version using the following command:

Simply just enter below in the command line,

ng --version OR ng v OR ng -v

Using the above command not only the Angular version but also the Node version is mentioned. For Node only use this command: node -v you will see this image.

If you have not installed, then please install the command as below

npm install -g @angular/cli

After that run this command to create your application:

ng new test-app
# Would you like to add Angular routing? No
# Which stylesheet format would you like to use? CSS

Now you need to move on your directive project so please use this command,

cd test-app

After creating your project, structure would be like the image below,

If you want to install bootstrap to make your form a little more beautiful then please use this command for installing bootstrap.

npm install bootstrap

After installing bootstrap add the Bootstrap CSS path in angular.json file like below

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

Please refer to the image below,

Now you have done your basic app, so for testing just run the following command to check if your application is running properly,

ng serve --open

ngx-translate

Now for translating the application nun the following command to install the ngx-translate packages in your application

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

Here we have installed 2 packages, the responsibility of the above packages are as follows:

The @ngx-translate/core package includes the required services, pipe, and directives, to convert the content in your expected languages and @ngx-translate/http-loader packege service aids in fetching the translation files from a webserver.

Now import and register the TranslateModule in app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
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);
}

TranslateService

For the translation you have to create language specific file in assets folder as suggested.

Open the assets folder and create “i18n” folder inside of it. In “i18n” folder, you have to add lang.json files along with the country code.

For example en.json, ar.json, fr.json etc. and data would be in key-value pair format.

en.json example,

{
"login": {
"title": "Login Form",
"username.label": "Username",
"username.placeholder": "Username Here",
"password.label": "Password",
"password.placeholder": "Enter Password",
"button.name": "Signin",
"forgotpassword.link": "Forgot Password ?",
"register.link": "Create New Account",
"button.en": "English",
"button.ta": "Tamil",
"button.fr": "French",
"button.zh": "Chinese"
}
}

2- fr.json

{
"login": {
"title": "Formulaire De Connexion",
"username.label": "Nom d'utilisateur",
"username.placeholder": "Nom D'Utilisateur Ici",
"password.label": "Mot de passe",
"password.placeholder": "Entrez Le Mot De Passe",
"button.name": "Signin",
"forgotpassword.link": "Mot De Passe Oublié ?",
"register.link": "Créer Un Nouveau Compte",
"button.en": "Anglaise",
"button.ta": "Tamil",
"button.fr": "Française",
"button.zh": "Chinoise"
}
}

now in this step we will see how to implement translations, Import TranslateService in app.component.ts file.

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

so your app would be like this,

export class AppComponent {
constructor(public translate: TranslateService) {
translate.addLangs(['en', 'nl']);
translate.setDefaultLang('en');
}
}

Here in the above code we have added 2 languages to support the application, based on requirement we can add many more languages.

But for this example we will cover only 2 languages and in the next line we have set one default language, en (English)

Language Switcher

Now the question is how to change our language, so here in this section we will learn how to switch languages, so for that I have created one method to switch the language.

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

And for this method we will implement one dropdown to switch the language, and this dropdown will contain all the languages that will support.

Code will be like this,

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

TranslatePipe

Now here we will implement the translate pipe. To translate the given text in the requested format place the following code inside the app.component.html file,

<nav class="navbar navbar-dark bg-primary">
<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>
<button type="submit" class="btn btn-block btn-danger">{{'Submit' | translate}}</button>
</form>
</div>

;)

ng serve -o

Now run the application and you will get the screen like this,

Summary

Finally we have completed how to create a new Angular application, then after that how to run the applicatiin, and finally we have implemented how to create ngx-translate service to help to translate text in the requested language using pipe(|)

I hope you liked this tutorial; please share it with others.

Thank you for taking your valuable time to read the full article.