Angular 14 ngx-translate Example to Build Multilingual & Localized i18n Forms in Browser Using TypeScript

Welcome folks today in this blog post we will be translating multilingual and localized i18n Forms in Browser Using TypeScript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new sampleproject

cd sampleproject

And then you need to install the below library using the below command as shown below

npm i @ngx-translate/core

npm i @ngx-translate/http-loader

And after that you will seeing the below directory structure of the angular app as shown below

So first of all you need to to go to app.module.ts file and copy paste the following code to include the ngx-translate module as shown below

app.module.ts

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);
}

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

}

As you can see we are importing the HttpClient Module also and then we are importing the ngx-translate core and loader modules. And then we are adding it inside the imports array.

Including Bootstrap

Now guys you need to go to index.html file and include the bootstrap cdn as shown below

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Languageapp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
</body>
</html>

<!doctype html>

<head>

<title>Languageapp</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

And then you need to go to app.component.html file and copy paste the below html code where we will be having the simple bootstrap html5 form in which we will be having different input fields and a submit button

app.component.html

<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>
    <div class="form-group">
      <label>{{'PhoneNo' | translate}}</label>
      <input type="tel" class="form-control">
    </div>
    <div class="form-group">
      <label>{{'Password' | translate}}</label>
      <input type="password" class="form-control">
    </div>
    <div class="form-group">
      <label>{{'Bio' | translate}}</label>
      <textarea rows="3" class="form-control"></textarea>
    </div>
    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input">
      <label class="form-check-label">{{'TermsConditions' | translate}}</label>
    </div>
    <button type="submit" class="btn btn-block btn-danger">{{'Submit' | translate}}</button>
  </form>
</div>

</a>

<option *ngFor="let language of translate.getLangs()" [value]="language"

[selected]="language === translate.currentLang">

</option>

</select>

</span>

</div>

</nav>

<form>

<label>{{'Name' | translate}}</label>

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

</div>

<label>{{'Email' | translate}}</label>

</div>

<label>{{'PhoneNo' | translate}}</label>

</div>

<label>{{'Password' | translate}}</label>

</div>

<label>{{'Bio' | translate}}</label>

</div>

<label class="form-check-label">{{'TermsConditions' | translate}}</label>

</div>

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

</form>

</div>

And now we need to go to app.component.ts file and copy paste the below typescript code as shown below

app.component.ts

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', 'nl','es','de']);
    translate.setDefaultLang('en');
  }
  switchLang(lang: string) {
    this.translate.use(lang);
  }
}

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', 'nl','es','de']);

translate.setDefaultLang('en');

}

switchLang(lang: string) {

this.translate.use(lang);

}

As you can see in the above code we are importing the ngx-translate core service and then we are adding the different languages inside the constructor and then we are setting the default language to english where the language code is en. And then we have defined the switchLang() method where we are passing the languageCode

And then now we need to create the i18n folder inside the assets folder and inside it we will define the json files for different languages. The four languages will be german which is de and then we have the default language which is en which is english and then we have spanish which is es and lastly we have nl which is dutch.

en.json

{
    "Sitetitle": "Angular Multi Language Site",
    "Name": "Name",
    "NameError": "I am sure you must have a name!",
    "Email": "Email address",
    "PhoneNo": "Phone No",
    "Password": "Password",
    "Bio": "Enter bio",
    "TermsConditions": "I agree to terms and conditions.",
    "Submit": "Submit"
}

{

"Sitetitle": "Angular Multi Language Site",

"Name": "Name",

"NameError": "I am sure you must have a name!",

"Email": "Email address",

"PhoneNo": "Phone No",

"Password": "Password",

"Bio": "Enter bio",

"TermsConditions": "I agree to terms and conditions.",

"Submit": "Submit"

}

es.json

{
    "Sitetitle": "Sitio angular en varios idiomas",
    "Name":"Nombre",
    "NameError": "¡Estoy seguro de que debes tener un nombre!",
    "Email": "Dirección de correo electrónico",
    "PhoneNo": "Número de teléfono",
    "Password": "Contraseña",
    "Bio": "Ingresar biografía",
    "TermsConditions": "Acepto los términos y condiciones.",
    "Submit":"entregar"
}

{

"Sitetitle": "Sitio angular en varios idiomas",

"Name":"Nombre",

"NameError": "¡Estoy seguro de que debes tener un nombre!",

"Email": "Dirección de correo electrónico",

"PhoneNo": "Número de teléfono",

"Password": "Contraseña",

"Bio": "Ingresar biografía",

"TermsConditions": "Acepto los términos y condiciones.",

"Submit":"entregar"

}

nl.json

{
    "Sitetitle": "Hoekige site met meerdere talen",
    "Name": "Naam",
    "NameError": "Ik weet zeker dat je een naam moet hebben",
    "Email": "E-mailadres",
    "PhoneNo": "Telefoon nr",
    "Password": "Wachtwoord",
    "Bio": "Voer bio in",
    "TermsConditions": "Ik ga akkoord met de voorwaarden.",
    "Submit": "voorleggen"
}

{

"Sitetitle": "Hoekige site met meerdere talen",

"Name": "Naam",

"NameError": "Ik weet zeker dat je een naam moet hebben",

"Email": "E-mailadres",

"PhoneNo": "Telefoon nr",

"Password": "Wachtwoord",

"Bio": "Voer bio in",

"TermsConditions": "Ik ga akkoord met de voorwaarden.",

"Submit": "voorleggen"

}

de.json

{
    "Sitetitle": "Winkelige mehrsprachige Website",
    "Name":"Name",
    "NameError": "Ich bin sicher, Sie müssen einen Namen haben!",
    "Email": "E-Mail-Adresse",
    "PhoneNo": "Telefonnr",
    "Password": "Passwort",
    "Bio": "Bio eingeben",
    "TermsConditions": "Ich stimme den Allgemeinen Geschäftsbedingungen zu.",
    "Submit":"einreichen"
}

{

"Sitetitle": "Winkelige mehrsprachige Website",

"Name":"Name",

"NameError": "Ich bin sicher, Sie müssen einen Namen haben!",

"Email": "E-Mail-Adresse",

"PhoneNo": "Telefonnr",

"Password": "Passwort",

"Bio": "Bio eingeben",

"TermsConditions": "Ich stimme den Allgemeinen Geschäftsbedingungen zu.",

"Submit":"einreichen"

}

Now we can start the angular app by executing the below command as shown below

ng serve

This will start the angular app at port number 4200 as shown below