How to translate dynamic data coming from api in Angular?

In Angular, to translate dynamic data—that is, data that might change during the runtime of your application—you often use a library designed for internationalization (i18n) and localization. One of the most popular libraries for this purpose in Angular applications is ngx-translate. ngx-translate provides a straightforward way to translate your app, including dynamic data.

Here’s a basic guide on how to use ngx-translate to translate dynamic data in Angular:

Step 1: Install ngx-translate

First, add ngx-translate to your project by installing the core package and the HTTP loader package, which is used to load translations from external files:

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

Step 2: Configure ngx-translate in Your Angular Module

Import TranslateModule and TranslateLoader from @ngx-translate/core, and TranslateHttpLoader from @ngx-translate/http-loader in your app module. Then, set up TranslateHttpLoader to load translation files from a specific directory (e.g., /assets/i18n/):

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
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 {}

Step 3: Create Translation Files

Create JSON translation files for each language you want to support. Place these files in the /assets/i18n/ directory (or wherever you chose to store them). For example, you might have en.json for English and fr.json for French:

// en.json
{
  "greeting": "Hello, {{name}}!"
}

// fr.json
{
  "greeting": "Bonjour, {{name}}!"
}

Step 4: Use the TranslateService to Translate Dynamic Data

Inject TranslateService into your component and use it to translate dynamic data. You can use the translate method to get translations programmatically. For data bindings in your templates, you can use the translate pipe.

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

@Component({
  selector: 'app-root',
  template: `<div>{{ 'greeting' | translate:param }}</div>`
})
export class AppComponent {
  param = {name: 'John'};

  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
  }

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

In this example, the greeting message is dynamic, including a name that can change. By using the translate pipe and passing a parameter (param), you can easily display translated and dynamic content.

This is a basic overview. ngx-translate offers much more functionality, such as lazy loading of translation resources, fallback languages, and more. Be sure to check out the official ngx-translate documentation for more detailed information and advanced usage.