Mumbai name in the Marathi Language

Language Localisation using Angular 9

In this story, we will see how to add language localisation in angular project.

See this story to create an Angular project with Material Design

First thing you will need is an Angular project. I am going to use my existing project (Angular + Material).

You may refer to my previous story that is “Angular Material: Getting Started” for creation of the angular project with Material Design.

Let's create a translate folder in the directory.

In that folder, we will create a translate folder like this.

translate folder

These are code of these all files or download translate folder

1. index.ts file

export * from './translate.service';
export * from './translations';
export * from './translate.pipe';

2. lang-eng.ts (For default English translations)

export const LANG_EN_NAME = 'en';
export const LANG_EN_TRANS = {
"Translate":"Translate",
"Hi, I am Shubham":"Hi, I am Shubham"
};

3. lang-hi.ts (For default Hindi translations)

export const LANG_HI_NAME = 'hi';
export const LANG_HI_TRANS = {
"Translate":"भाषांतर",
"Hi, I am Shubham":"हाय, मैं शुभम हूं"
};

4. lang-mr.ts (For default Marathi translations)

export const LANG_MR_NAME = 'mr';
export const LANG_MR_TRANS = {
"Translate":"भाषांतर",
"Hi, I am Shubham":"हाय, मी शुभम आहे"
};

5. translate.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '../translate'; 
@Pipe({
name: 'translate',
pure: false // impure pipe, update value when we change language
})
export class TranslatePipe implements PipeTransform {
constructor(private _translate: TranslateService) { }
transform(value: string): any {
if (!value) return;
return this._translate.instant(value);
}
}

6. translate.service.ts

import {Injectable, Inject} from '@angular/core';
import { TRANSLATIONS } from './translations'; // import our opaque token
@Injectable()
export class TranslateService {
private _currentLang: string;
public get currentLang() {
return this._currentLang;
}
constructor(@Inject(TRANSLATIONS) private _translations: any) {
}
public use(lang: string): void {
this._currentLang = lang;
}
public translate(key: string): string {
let translation = key;
if (this._translations[this.currentLang] && this._translations[this.currentLang][key]) {
return this._translations[this.currentLang][key];
}
return translation;
}
public instant(key: string) {
return this.translate(key);
}
}

7. translations.ts

import { InjectionToken } from '@angular/core';
// import translations
import { LANG_EN_NAME, LANG_EN_TRANS } from './lang-en';
import { LANG_MR_NAME, LANG_MR_TRANS } from './lang-mr';
import { LANG_HI_NAME, LANG_HI_TRANS } from './lang-hi';
export const TRANSLATIONS = new InjectionToken('translations');
export const dictionary = {
[LANG_EN_NAME]: LANG_EN_TRANS,
[LANG_MR_NAME]: LANG_MR_TRANS,
[LANG_HI_NAME]: LANG_HI_TRANS,
};
export const TRANSLATION_PROVIDERS = [
{ provide: TRANSLATIONS, useValue: dictionary },
];

Don’t worry this is the link of the compressed file of this folder. :) You can download and extract this folder in your repository.

Now open app.module.ts file

For localisation, you will need an Interceptor.

so to create it, use

ng g s Interceptor/HTTPReqInterceptor

Now replace/merge this in your interceptor file:

@Injectable({
providedIn: 'root'
})
export class HTTPReqInterceptor implements HttpInterceptor {
constructor() { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
var response: Observable<HttpEvent<any>> = next.handle(request);
return response;
}
}

Now in your app.module.ts file, in imports add

import { TRANSLATION_PROVIDERS, TranslateService, TranslatePipe } from './translate';

In declarations add

TranslatePipe,

In providers add

TRANSLATION_PROVIDERS, TranslateService,
{
provide: HTTP_INTERCEPTORS,
useClass: HTTPReqInterceptor, 
multi: true
},

Create a shared service to manage shared functions

ng g s shared/shared

In shared service replace/merge this code

constructor( private _translate: TranslateService,) { }
selectedLanguage:string="English";

changeLanguage(newLang: string){
console.log("language set to"+newLang);
this._translate.use(newLang);
}

Here we are setting default language as English.

Now open component.ts in which we are going to give toggle of select languages.

So for me, I am opening my home.component.ts file

Injecting sharedService using dependency injection in constructor

constructor(public sharedService:SharedService,) { }

also, adding a function for Language Change Event in the same file.

onSelectLanguage(lang:string){
this.sharedService.changeLanguage(lang);
}

also, add and initialize variable selectLanguageRadio

selectLanguageRadio="en";

Now open view of your component

In my case, I am opening home.component.html file

Adding toggle radio buttons for changing the language

<mat-radio-group [(ngModel)]=”selectLanguageRadio”
(ngModelChange)=’onSelectLanguage(selectLanguageRadio)’>
<mat-radio-button value=”en”>English</mat-radio-button>&nbsp;&nbsp;
<mat-radio-button value=”mr”>मराठी</mat-radio-button>&nbsp;&nbsp;
<mat-radio-button value=”hi”>हिंदी</mat-radio-button>&nbsp;&nbsp;
</mat-radio-group>

Now our configuration part is done… !!

Now add text for translation in anywhere in the program.

<h2>
{{"Translate" | translate}}
</h2>
<br>
<h3>
{{"Hi, I am Shubham" | translate}}
</h3>

We will have to add every line/word that we want to translate in our lang-en/mr/hi.ts file. And here we just used {{“your key” | translate}} (translate is our pipe name) to translate.

Now hit command for the run program.

npm start

Now you can see output like :

default screen

after selecting the Marathi Language

Thank You!!!