Featuring ngxTranslate To Implement Translation In Angular
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!
