Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 21, 2023

 

 

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

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>

 

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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>

 

 

 

 

 

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

 

 

app.component.ts

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

 

 

1
2
3
4
5
6
7
8
9
10
11
{
    "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

 

 

1
2
3
4
5
6
7
8
9
10
11
{
    "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

 

 

1
2
3
4
5
6
7
8
9
10
11
{
    "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

 

 

1
2
3
4
5
6
7
8
9
10
11
{
    "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

 

 

 

 

 

Recent Posts

  • Android Java Tutorial to Change Styles & Visibility of System Bars (Top, Action & Status) Full Example
  • Android Java Project to Display & Play Audio Files From Storage inside ListView Using MediaPlayer Class
  • Android Java Project to Build MP4 Video to MP3 Audio Converter Using MediaMuxer Class
  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme