How to translate your Angular 16 app with ngx-translate

If you’re building a web app with Angular 16 and you want to make it accessible to a global audience, it’s essential to implement language translation. Thankfully, the ngx-translate library makes this process straightforward. Below, we’ll walk through the steps to integrate ngx-translate into your Angular 16 app.

Step 1: Install ngx-translate

First, you’ll need to install the ngx-translate/core and ngx-translate/http-loader packages. You can do this by running the following commands in your terminal:

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

Step 2: Configure the Translation Service

Once you have ngx-translate installed, you’ll need to configure the translation service in your Angular app. First, import the necessary modules and services in your app module:

    
      import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
      import { TranslateHttpLoader } from '@ngx-translate/http-loader';
      import { HttpClient, HttpClientModule } from '@angular/common/http';
    
  

Next, create a function to load the translation files from the server:

    
      export function HttpLoaderFactory(http: HttpClient) {
        return new TranslateHttpLoader(http, './assets/i18n/', '.json');
      }
    
  

Finally, add the TranslateModule to your app module with the loader function:

    
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
    
  

Step 3: Add Translations to Your App

Now that ngx-translate is set up, you can start adding translations to your app. Create translation files for each language you support and place them in the assets/i18n directory. For example, you might have en.json for English, es.json for Spanish, and so on.

Step 4: Use the Translate Service

Finally, you can use the TranslateService throughout your app to display the appropriate translations. For example, you might use the translate pipe in your templates or the get method in your TypeScript files.

    
      {{ 'HELLO_WORLD' | translate }}
      // or
      this.translateService.get('HELLO_WORLD').subscribe((translation: string) => {
        console.log(translation);
      });
    
  

By following these steps, you can easily integrate ngx-translate into your Angular 16 app and provide a localized experience for your users around the world.