La implemantación de un sistema multi-idioma en aplicaciones Angular permite adaptar la interfaz de usuario a diferentes regiones de forma dinámica. Para integrar esta funcionalidad con los componentes de PrimeNG, se utiliza habitualmente la librería @ngx-translate.

1. Instalación de dependencias

Es necesario instalar el núcleo de traducción y el cargador HTTP para gestionar los archivos de recursos externos:

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

2. Definición de archivos de recursos

Cree una estructura de archivos JSON dentro de la carpeta assets/i18n/ para almacenar las claves de traducción. Por ejemplo:

es.json (Español)

{
    "btn.confirm": "Confirmar",
    "btn.cancel": "Cancelar",
    "label.switch_es": "Cambiar a Español",
    "label.switch_en": "Cambiar a Inglés"
}

en.json (Inglés)

{
    "btn.confirm": "Confirm",
    "btn.cancel": "Cancel",
    "label.switch_es": "Switch to Spanish",
    "label.switch_en": "Switch to English"
}

3. Configuración del módulo principal

En el archivo app.module.ts, se debe configurar el TranslateModule definiendo un cargador que busque los archivos JSON mediante peticiones HTTP.

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

// Función para cargar los archivos de traducción
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ]
})
export class AppModule { }

4. Lógica de cambio de idioma en componentes

Para gestionar el cambio de idioma y sincronizar los componentes de PrimeNG, se inyectan los servicios TranslateService y PrimeNGConfig. El servicio de PrimeNG permite traducir etiquetas inetrnas de sus componentes (como meses del calendario o filtros).

import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

  constructor(
    private translate: TranslateService, 
    private primengConfig: PrimeNGConfig
  ) {
    // Idioma por defecto
    this.translate.setDefaultLang('es');
  }

  ngOnInit() {
    // Sincronizar PrimeNG con las traducciones actuales
    this.translate.get('primeng').subscribe(res => {
      this.primengConfig.setTranslation(res);
    });
  }

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

5. Uso en el template HTML

Se puede emplear el pipe translate para mostrar las etiquetas dinámicamente en los botones y componentes de PrimeNG.

<div class="actions">
  <p-button 
    label="{{ 'label.switch_es' | translate }}" 
    (onClick)="updateLanguage('es')">
  </p-button>

  <p-button 
    label="{{ 'label.switch_en' | translate }}" 
    (onClick)="updateLanguage('en')" 
    styleClass="p-button-secondary">
  </p-button>
</div>

<hr>

<div>
  <button pButton type="button" [label]="'btn.confirm' | translate"></button>
</div>

Gestión de estado del idioma

En aplicaciones de producción, es recomendable perisstir la elección del usuario. Una práctica común consiste en almacenar el código del idioma en el localStorage del navegador. Al iniciar la aplicación, se puede verificar si existe una preferencia guardada antes de aplicar el idioma por defecto.

const userLang = localStorage.getItem('app_lang') || 'es';
this.translate.use(userLang);