Create Angular Applications using ngx-Translate

Introduction

In this article, we will learn how to create angular applications using ngx-translate.

Steps:

Step 1

Create an Angular project setup using the below command or however you want to create it.

ng new projectname

Example:

ng new ngx-new

Create Angular Applications Using ngx-Translate

Step 2

Now, we must install @ngx-translate/core in our Angular app. Open a new terminal and run the below command.

npm i @ngx-translate/core

Now we can use ngx-translate in our Angular project. Then, we have to import TranslateModule.forRoot() in the root NgModule of your application.

import {TranslateModule, TranslateLoader} from '@ngx-translate/core';

TranslateModule.forRoot()

Step 3

Now, we must install @ngx-translate/http-loader in our Angular app. Open a new terminal and run the below command.

npm i @ngx-translate/http-loader

The TranslateHttpLoader uses HttpClient to load translations, it means that you have to import the HttpClientModule from @angular/common/http before the TranslateModule,

app.module.ts

import {
BrowserModule
} from '@angular/platform-browser';
import {
NgModule
} from '@angular/core';
import {
AppRoutingModule
} from './app-routing.module';
import {
AppComponent
} from './app.component';
import {
HttpClient,
HttpClientModule
} from '@angular/common/http';
import {
TranslateModule,
TranslateLoader
} from '@ngx-translate/core';
import {
TranslateHttpLoader
} from '@ngx-translate/http-loader';
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient);
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Step 4

Now, we can use folder assets, then whatever language we want to create a separate JSON.

In this article, we are doing two languages:

en.json

{
"Dashboard": {
"Title": "welcome Angular 9",
"Option": "Change language"
}
}

fr.json

{
"Dashboard": {
"Title": "bienvenue Angular 9",
"Option": "Changer la langue"
}
}

Step 5

Now, we can do some code in app.component.ts

TranslateService

We have to initialize some properties in the TranslateService. The best place to do this is probably in our app.component.ts

import {
TranslateService
} from '@ngx-translate/core';
constructor(public translate: TranslateService) {
translate.addLangs(['en', 'fr']);
translate.setDefaultLang('en');
const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}

It will allows you to specify a fallback set of translations to use in case there are missing translations for the current language.

Translate.use(browserLang.match(/en|fr/) ? browserLang : 'en') - the service which is the current language to use for translations

Step 6

Now, we can do some code in app.component.html

<div>
<h3>{{ 'Dashboard.Title' | translate }}</h3>
<div>
{{ 'Dashboard.Option' | translate }}
<select #langOption (change)="translate.use(langOption.value)">
<option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
</select>
</div>
</div>

Step 7

Now, Run the application:

npm start

Step 8

Now, we will get the following output...