Add multilanguage support in angular

Add multilanguage support in angular

In this article let’s understand how to add multilanguage support in an angular application.

Considering you will have an angular project setup or you can create one using below command.

npm install -g @angular/cli

ng new myNewApp

You will have the below structure ready. Few files may vary based on your angular version but the process will be same.

Install packages

Let’s install the packages we will need from npm for language support using below commands.

npm i @ngx-translate/core --save

This package includes the essential services, pipe, and directives, to convert the content in various languages


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

This will helps in fetching the translation files from a webserver.

Next we need to import these both in or app module file and create loader that will be loaded on build time and this will use translator interface to generate the translations.

Set app.module.ts

Checkout code below to make changes at /app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
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,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader:{
        provide:TranslateLoader,
        useFactory: translator,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// This function will be used while compilation to translate
export function translator(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

Create lang files

Now we will create required files in assets folder. Lets say we want English and French. So we will create en.json & fr.json within i18n folder.

The final structure will be /assets/i18n/en.json & /assets/i18n/fr.json

Create Key-Value pair in each language file with same key and different values as below.

/assets/lang/en.json

{
    "hello":"Hello",
    "welcomeText" : "Welcome"
}

/assets/lang/fr.json

{
    "hello":"Bonjour",
    "welcomeText":"Bienvenu"
}

Next lets import translate service and inject in constructor in our app component.

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public translate : TranslateService)
  {
    translate.addLangs(['en','fr']);
    translate.defaultLang('en');
  }
}

There has to be default language to initialize so add as above. It’s also used when translations will be missing this language will be used as default. In above constructor we informed the service which languages we are gonna use and it must be the file names we set in assets folder.

Set change language functionality

Let’s create a dropdown to change the current language so we a see translations in different language. Remove unnecessary code if you have installed fresh project and add below html in app.component.html.

<label> Select Language : </label>
  <select 
      class="form-control" 
      #selectedLang 
      (change)="changeLang(selectedLang.value)">
    <option *ngFor="let language of translate.getLangs()" 
      [value]="language"
      [selected]="language === translate.currentLang">
      {{ language }}
    </option>
  </select>

  <h3>{{'hello' | translate}}</h3>
  <h3>{{'welcomeText' | translate}}</h3>
<router-outlet></router-outlet>

Add change language function in your app.component.ts as below.

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public translate : TranslateService)
  {
    translate.addLangs(['en','fr']);
    translate.setDefaultLang('en');
  }
  title = 'myNewApp';

  /* use this function to change current language from dropdown */
  changeLang(lang: string) {
    this.translate.use(lang);
  }
}

That’s all we need to do to make multi language support. Let’s check how our output looks.

Output :

That’s it on how to use multilanguage support in angular.

Read more articles on angular here.