Featuring ngxTranslate To Implement Translation In Angular

Implementing Translation in Angular with ngx-translate

A key component of developing applications for a worldwide user base is localization. With the aid of ngx-translate, a potent library for managing translations in Angular apps, Angular facilitates this process. We'll walk you through the steps of configuring and adding translation capabilities to an Angular project with ngx-translate in this blog post.

Step 1: Installation

Installing ngx-translate and its dependencies is the first step. Launch a terminal window and type the following command.

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

This installs ngx-translate/core for translation handling and @ngx-translate/http-loader for loading translations via HTTP

Step 2: Setting Up ngx-translate

Next, in your Angular application, you must configure ngx-translate. You may import the required modules and functions by opening your app.module.ts file.

// 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 {}

This setup loads translation files from the 'assets/i18n/' directory with a '.json' extension using a loader that we put up using the TranslateHttpLoader.

Also, Read Developing SEO Friendly Application Using Angular

Step 3: Create Translation Files

Now, create translation files in the 'assets/i18n/' directory. For example, you can have 'en.json' and 'fr.json' for English and French translations

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

Use the translate pipe in your components to display translated text. Open your app.component.ts file and implement translation functionality

// 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');
  }
}

In this example, the translate pipe is used to display translated text. The switchLanguage method is called to switch between English and French

Also, Read Once and For All, Angular vs React

Step 5: Run Your Application

Finally, run your Angular application with the following command:

ng serve

Visit http://localhost:4200 in your browser, and you should see the translated text. You can now easily switch between languages by clicking the "Switch Language" button.

Conclusion

We've shown in this blog article how to use ngx-translate to provide translation features to an Angular application. By streamlining the translation management process, this robust library increases the accessibility of your application to a worldwide user base. Please feel free to investigate the other features that ngx-translate offers to manage more complex localization needs for your Angular projects.

Happy coding!