Translate dynamic values in angular?

Question

I would like to know if it is possible to translate dynamic values in angular. So for example there is a field to create a new post. You enter the posts name. Now you entered it in your language but when you switch the language of the app how can it be realized that the name you entered is translated in the switched language?

I used Ngx translate

Now I read about translation apis

But I wanted to know if there is an easy solution for that?

Or can I use a different way to enter values (name for example) in the frontend and translate them dynamically?

Answer 1

approaches for handling dynamic content translation

• update code as per you code structure
• Install dependencies:

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

Use the dynamicTranslate pipe in your templates:

<h1>{{ dynamicContentId | dynamicTranslate | async }}</h1>

// translation.service.ts
import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

interface TranslationEntry {
  id: string;
  translations: {
    [key: string]: string;  // language code -> translated text
  };
}

@Injectable({
  providedIn: 'root'
})
export class DynamicTranslationService {
  private translationsSubject = new BehaviorSubject<TranslationEntry[]>([]);
  public translations$ = this.translationsSubject.asObservable();

  constructor(
    private translate: TranslateService,
    private http: HttpClient
  ) {
    // Initialize translations from storage or API
    this.loadTranslations();
  }

  // Add new content with translations
  addDynamicContent(content: string, sourceLanguage: string): string {
    const id = this.generateUniqueId();
    const translations = {
      [sourceLanguage]: content
    };

    // Store the new entry
    const currentTranslations = this.translationsSubject.value;
    currentTranslations.push({ id, translations });
    this.translationsSubject.next(currentTranslations);

    // Optionally, send to backend
    this.saveToDB({ id, translations });

    return id;
  }

  // Get translated content
  getTranslation(id: string, targetLanguage: string): Observable<string> {
    return this.translations$.pipe(
      map(translations => {
        const entry = translations.find(t => t.id === id);
        if (!entry) return id; // fallback to ID if not found

        // If translation exists, return it
        if (entry.translations[targetLanguage]) {
          return entry.translations[targetLanguage];
        }

        // If translation doesn't exist, try to translate
        return this.translateContent(
          entry.translations[Object.keys(entry.translations)[0]],
          targetLanguage
        );
      })
    );
  }

  // Translate using external service (example using Google Translate API)
  private async translateContent(text: string, targetLanguage: string): Promise<string> {
    // Implementation would depend on your chosen translation API
    // Example using a translation service:
    const apiUrl = `your-translation-api-endpoint`;
    const response = await this.http.post(apiUrl, {
      text,
      targetLanguage
    }).toPromise();

    return response['translatedText'];
  }

  private generateUniqueId(): string {
    return 'dyn_' + Math.random().toString(36).substr(2, 9);
  }

  private loadTranslations() {
    // Load from localStorage or API
    const stored = localStorage.getItem('dynamicTranslations');
    if (stored) {
      this.translationsSubject.next(JSON.parse(stored));
    }
  }

  private saveToDB(entry: TranslationEntry) {
    // Save to backend/database
    const currentTranslations = this.translationsSubject.value;
    localStorage.setItem('dynamicTranslations', JSON.stringify(currentTranslations));
  }
}

// example-component.ts
import { Component, OnInit } from '@angular/core';
import { DynamicTranslationService } from './dynamic-translation.service';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-post-creator',
  template: `
    <!-- Create Post Form -->
    <form (ngSubmit)="createPost()">
      <input [(ngModel)]="postName" name="postName" placeholder="Enter post name">
      <button type="submit">Create Post</button>
    </form>

    <!-- Display Posts -->
    <div *ngFor="let post of posts">
      <h3>{{ post.translationId | dynamicTranslate | async }}</h3>
    </div>
  `
})
export class PostCreatorComponent implements OnInit {
  posts: Array<{ id: string, translationId: string }> = [];
  postName: string = '';

  constructor(
    private dynamicTranslationService: DynamicTranslationService,
    private translateService: TranslateService
  ) {}

  createPost() {
    // Store the post name with current language
    const translationId = this.dynamicTranslationService.addDynamicContent(
      this.postName,
      this.translateService.currentLang
    );

    // Add post to list
    this.posts.push({
      id: Math.random().toString(),
      translationId
    });

    this.postName = '';
  }
}

// dynamic-translate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DynamicTranslationService } from './dynamic-translation.service';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';

@Pipe({
  name: 'dynamicTranslate'
})
export class DynamicTranslatePipe implements PipeTransform {
  constructor(
    private dynamicTranslationService: DynamicTranslationService,
    private translateService: TranslateService
  ) {}

  transform(translationId: string): Observable<string> {
    return this.dynamicTranslationService.getTranslation(
      translationId,
      this.translateService.currentLang
    );
  }
}