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