Angular is a TypeScript-based free, open-source framework developed by Google. It allows its users to develop front-ends of mobile and web applications. It is focused on creating dynamic single-page applications (SPA) and provides a structured way to build client-side applications using TypeScript/JavaScript, HTML, and CSS. Angular also supports multiple libraries and encourages component-based architecture.
NGX-Translate is a library supported by Angular which allows its users to set up their web pages in multiple languages. This translation support allows users to create a seamless experience between different languages which also allows dynamic switches during runtime. It also allows for interpolation, where dynamic values can be inserted into translated strings. This becomes very useful when incorporating variables such as names, dates, and more.
Before starting the Angular setup, we must have Node.js and NPM (or Yarn) package manager. To install these, visit the
Now that we have set up Node.js and our package manager, we can proceed with Angular. Follow the steps below to download, install, and set up our Angular application.
First, We will open our terminal and enter the command below to install our Angular CLI.
npm install -g @angular/cli
Now, we can create our Angular application by entering the command below, where we can replace translateApp with any name we like. After we enter this, we need to enable routing and select CSS as our style.
ng new translateApp
To make our process more accessible, we can use an IDE like VS Code and install extensions like Angular Language Service.
Now open the folder we created and run the following command on our terminal to install the translation library.
npm install @ngx-translate/core @ngx-translate/http-loader --save
Let us now begin with our implementation of NGX-Translate in Angular.
We will now import a few modules in our "app.module.ts" file. We will also add the imported modules' respective configurations in the imports section. Moreover, we will create a export HttpLoaderFactory function that allows NGX-Translate to dynamically load translation files from a server or local folder and make them available for translation.
import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { BrowserModule } from '@angular/platform-browser';import { HttpClientModule, HttpClient } from '@angular/common/http';import { TranslateModule, TranslateLoader } from '@ngx-translate/core';import { TranslateHttpLoader } from '@ngx-translate/http-loader';export function HttpLoaderFactory(http: HttpClient) {return new TranslateHttpLoader(http);}@NgModule({declarations: [AppComponent],imports: [BrowserModule,HttpClientModule,TranslateModule.forRoot({loader: {provide: TranslateLoader,useFactory: HttpLoaderFactory,deps: [HttpClient]}})],bootstrap: [AppComponent],})export class AppModule { }
Now we will create the translation files. These files will be placed in the "src/assets/i18n" folder with their filename and the .json file type. These files will contain key-value pairs for their respective languages. An example of en.json is given below.
{"hello": "Hello user","welcome": "Welcome to Educative Translate with NGX-Translate"}
Afterward, we will import the TranslateService service from the NGX-Translate library in our "app.components.ts" file. In our export class component, we will create a constructor that sets the default language to our desired value, English in our case, and a onclick function to switch between languages.
import { Component } from '@angular/core';import { TranslateService } from '@ngx-translate/core'; // importing service@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],})export class AppComponent {constructor(private translate: TranslateService) {translate.setDefaultLang('en'); // Set the default language}changeLanguage(lang: string) {this.translate.use(lang); // Change the active language}}
Finally, we will create a front end in our "app.component.html" file. This can be anything we want to show. An example code is given below that displays a keyword and has buttons to switch between languages.
<div><h1>{{ 'hello' | translate }}</h1><button (click)="changeLanguage('en')">English</button><button (click)="changeLanguage('fr')">French</button></div>
We have finished creating our translation-integrated Angular application. Now, we can visit the local host page and see our page with the translation feature. Moreover, we have given a running version of the translation application below for convenience.
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}
NGX-Translate is a powerful tool to create and manage multi-linguistical web and mobile applications. It allows for a simplistic implementation to alternate between languages in real-time. Moreover, the dynamic methodology and its lazy loading create a smooth and efficient system. It also supports error handling such that the variable will return to its default value if a translation fails. These features make this a solid addition to any application for users looking at a global and/or diverse audience.
Free Resources