How to use ngx translate in Angular 8?

Internationalization (i18n) is an essential aspect of modern web development, enabling applications to reach a global audience by supporting multiple languages and locales. Angular, a popular JavaScript framework, provides robust tools and libraries to facilitate i18n implementation. In this article, we will explore how I set up i18n in Angular using the ngx-translate library, a versatile solution that simplifies the process of translating and localizing Angular applications.

Setting up internationalization (i18n) in an Angular application using ngx-translate involves a few steps to enable multi-language support. Here’s how you can do it:

Install ngx-translate and Dependencies:

Install ngx-translate/core and ngx-translate/http-loader packages using npm or yarn:

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

Configure ngx-translate in Your App:

In your app.module.ts, import the necessary modules and configure ngx-translate in your app.

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';

// Function to load translation files
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [/* ... */],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    /* ... */
  ],
  bootstrap: [/* ... */]
})
export class AppModule { }

Create Translation Files:

In your app’s assets folder, create a directory called i18n. Inside this directory, create translation JSON files for each language you want to support. For example, for English (en) and French (fr):

src/assets/i18n/en.json:

{
  "HELLO": "Hello, world!"
}

src/assets/i18n/fr.json:

{
  "HELLO": "Bonjour, le monde !"
}

Using Translations in Components:

In your components, you can use the TranslateService to fetch translations and display them:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ 'HELLO' | translate }}</h1>
  `
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    // Set the default language
    translate.setDefaultLang('en');
    // Add more supported languages
    translate.addLangs(['en', 'fr']);

    // Use the browser's language or default if not supported
    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }
}

Switching Languages:

You can provide a way for users to switch languages by using the TranslateService‘s use() method:

switchLanguage(lang: string) {
  this.translate.use(lang);
}

Create buttons or UI elements in your templates to trigger this function.

Remember that this is a basic setup, and you can extend it by adding more languages, handling dynamic content, and integrating with Angular’s pipes and directives to make the i18n process smoother for your application’s users. For more advanced scenarios, you can also consider using Angular’s built-in ng-xi18n tool for extracting strings from templates or exploring other i18n libraries like @angular/localize.

Leave a Comment Cancel reply