Featuring ngxTranslate To Implement Translation In Angular

ERP Solutions oodles
2 min readJan 29, 2024

Implementing Translation in Angular with ngx-translate

Localization is essential when creating applications for a global user base. Angular makes this process easier with the help of a powerful library for managing translations in Angular projects called ngx-translate. In this blog post, we’ll guide you through the process of setting up and adding translation capabilities to an Angular project using ngx-translate.

Step 1: Installation

The first step is to install ngx-translate and all of its dependencies. Open a terminal window and enter the command below.

npm install @ngx-translate/core @ngx-translate/http-loader

This installs @ngx-translate/http-loader to load translations over HTTP and ngx-translate/core to handle translations.

Step 2: Setting Up ngx-translate

Next, you need to set up ngx-translate in your Angular application. You can open your app.module.ts file and import the necessary modules and functions.

// app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;

import { NgModule } from ‘@angular/core’;

import { HttpClientModule, HttpClient } from ‘@angular/common/http’;

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

import { TranslateHttpLoader } from ‘@ngx-translate/http-loader’;

import { AppComponent } from ‘./app.component’;

export function HttpLoaderFactory(http: HttpClient) {

return new TranslateHttpLoader(http, ‘./assets/i18n/’, ‘.json’);

}

@NgModule({

declarations: [AppComponent],

imports: [

BrowserModule,

HttpClientModule,

TranslateModule.forRoot({

loader: {

provide: TranslateLoader,

useFactory: HttpLoaderFactory,

deps: [HttpClient],

},

}),

],

bootstrap: [AppComponent],

})

export class AppModule {}

We use a loader that we built up using the TranslateHttpLoader to load translation files from the ‘assets/i18n/’ directory with a ‘.json’ extension in this setup.

Also, Read Developing SEO Friendly Application Using Angular

Step 3: Create Translation Files

Proceed to generate translation files within the ‘assets/i18n/’ folder. For instance, you can have translations for English and French in the files “en.json” and “fr.json.”

// assets/i18n/en.json

{

“greeting”: “Hello, World!”,

“farewell”: “Goodbye!”

}

// assets/i18n/fr.json

{

“greeting”: “Bonjour, le monde!”,

“farewell”: “Au revoir!”

}

Step 4: Use Translations in Components

To see translated text, use the translate pipe feature in your components. Launch the app.component.ts file and use the translation feature.

// app.component.ts

import { Component } from ‘@angular/core’;

import { TranslateService } from ‘@ngx-translate/core’;

@Component({

selector: ‘app-root’,

template: `

<h1>{{ ‘greeting’ | translate }}</h1>

<p>{{ ‘farewell’ | translate }}</p>

<button (click)=”switchLanguage()”>Switch Language</button>

`,

})

export class AppComponent {

constructor(private translate: TranslateService) {

translate.setDefaultLang(‘en’);

}

switchLanguage() {

this.translate.use(this.translate.currentLang === ‘en’ ? ‘fr’ : ‘en’);

}

}

The translated text is shown in this example using the translate pipe. To transition between French and English, use the switchLanguage function.

Also, Read Once and For All, Angular vs React

Step 5: Run Your Application

Finally, use the following command to launch your Angular application:

ng serve

Open your browser to http://localhost:4200, and the translated text should appear. By pressing the “Switch Language” button, you may now quickly switch between languages.

Conclusion

This blog post explains how to add translation capabilities to an Angular application using ngx-translate. This powerful library makes your application more accessible to a global user base by optimising the translation management process. If you require more sophisticated translation for your Angular projects, don’t hesitate to explore the additional functionalities that ngx-translate provides.

Happy coding!

--

--

ERP Solutions oodles

We are a leading ERP development company in India offers a wide range of ERP software development services to help you grow your business exponentially.