Post
Ask Question

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,
  1. Prerequisites
  2. Create Angular App
  3. ngx-translate
  4. TranslateService
  5. Language Switcher
  6. 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,
  1. 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
  1. npm install -g @angular/cli  
After that run this command to create your application:
  1. ng new test-app  
  2.  
  3. # Would you like to add Angular routing? No  
  4. # 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
  1. "styles": [  
  2.    "src/styles.css",  
  3.    "node_modules/bootstrap/dist/css/bootstrap.min.css"  
  4. ]  
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
  1. npm i @ngx-translate/core --save  
  2. 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
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppComponent } from './app.component';  
  4.   
  5. import { TranslateLoader, TranslateModule } from '@ngx-translate/core';  
  6. import { TranslateHttpLoader } from '@ngx-translate/http-loader';  
  7. import { HttpClient, HttpClientModule } from '@angular/common/http';  
  8.   
  9. @NgModule({  
  10. declarations: [  
  11.    AppComponent  
  12. ],  
  13. imports: [  
  14.    BrowserModule,  
  15.    HttpClientModule,  
  16.    TranslateModule.forRoot({  
  17.    loader: {  
  18.       provide: TranslateLoader,  
  19.       useFactory: httpTranslateLoader,  
  20.       deps: [HttpClient]  
  21.       }  
  22.    })  
  23.    ],  
  24.       providers: [],  
  25.    bootstrap: [AppComponent]  
  26. })  
  27.   
  28. export class AppModule { }  
  29.   
  30.    // AOT compilation support  
  31.    export function httpTranslateLoader(http: HttpClient) {  
  32.       return new TranslateHttpLoader(http);  
  33. }  
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,
  1. {  
  2.     "login": {  
  3.         "title": "Login Form",  
  4.         "username.label": "Username",  
  5.         "username.placeholder": "Username Here",  
  6.         "password.label": "Password",  
  7.         "password.placeholder": "Enter Password",  
  8.         "button.name": "Signin",  
  9.         "forgotpassword.link": "Forgot Password ?",  
  10.         "register.link": "Create New Account",  
  11.         "button.en": "English",  
  12.         "button.ta": "Tamil",  
  13.         "button.fr": "French",  
  14.         "button.zh": "Chinese"  
  15.     }  
  16. }   
2- fr.json
  1. {  
  2.     "login": {  
  3.         "title": "Formulaire De Connexion",  
  4.         "username.label": "Nom d'utilisateur",  
  5.         "username.placeholder": "Nom D'Utilisateur Ici",  
  6.         "password.label": "Mot de passe",  
  7.         "password.placeholder": "Entrez Le Mot De Passe",  
  8.         "button.name": "Signin",  
  9.         "forgotpassword.link": "Mot De Passe Oublié ?",  
  10.         "register.link": "Créer Un Nouveau Compte",  
  11.         "button.en": "Anglaise",  
  12.         "button.ta": "Tamil",  
  13.         "button.fr": "Française",  
  14.         "button.zh": "Chinoise"  
  15.     }  
  16. }   
now in this step we will see how to implement translations, Import TranslateService in app.component.ts file.
  1. import { TranslateService } from '@ngx-translate/core';  
so your app would be like this,
  1. export class AppComponent {  
  2.     constructor(public translate: TranslateService) {  
  3.         translate.addLangs(['en', 'nl']);  
  4.         translate.setDefaultLang('en');  
  5.     }  
  6. }   
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.
  1. switchLang(lang: string) {  
  2.    this.translate.use(lang);  
  3. }  
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,
  1. <span class="form-inline">  
  2.     <select    
  3. class="form-control"    
  4. #selectedLang    
  5. (change)="switchLang(selectedLang.value)">  
  6.         <option *ngFor="let language of translate.getLangs()"    
  7. [value]="language"    
  8. [selected]="language === translate.currentLang">    
  9. {{ language }}    
  10. </option>  
  11.     </select>  
  12. </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,
  1. <nav class="navbar navbar-dark bg-primary">  
  2.     <div class="container">  
  3.         <a class="navbar-brand">    
  4. {{'Sitetitle' | translate }}    
  5. </a>  
  6.         <span class="form-inline">  
  7.             <select class="form-control" #selectedLang (change)="switchLang(selectedLang.value)">  
  8.                 <option *ngFor="let language of translate.getLangs()" [value]="language"    
  9. [selected]="language === translate.currentLang">    
  10. {{ language }}    
  11. </option>  
  12.             </select>  
  13.         </span>  
  14.     </div>  
  15. </nav>  
  16. <div class="container">  
  17.     <form>  
  18.         <div class="form-group">  
  19.             <label>{{'Name' | translate}}</label>  
  20.             <input type="text" class="form-control">  
  21.                 <small class="text-danger">{{'NameError' | translate}}</small>  
  22.             </div>  
  23.             <div class="form-group">  
  24.                 <label>{{'Email' | translate}}</label>  
  25.                 <input type="email" class="form-control">  
  26.                 </div>  
  27.                 <button type="submit" class="btn btn-block btn-danger">{{'Submit' | translate}}</button>  
  28.             </form>  
  29.         </div>    
;)
  1. 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.


Similar Articles