Angular Multi-Lenguaje Sin Librerías: Un Pipe Personalizado con Signals 🌍

En este artículo, te mostraré cómo crear un Pipe para traducción dinámica que permita cambiar de idioma de forma fluida y reactiva, aprovechando la potencia de Angular Signals.

¡Todo se gestiona enteramente en el Frontend! No utilizamos llamadas a API externas para recuperar las traducciones, sino que las almacenamos directamente en archivos JSON dentro de la aplicación. Esto garantiza la máxima velocidad e independencia del backend.

Creación Translation Pipe

Los pipes en Angular son herramientas poderosas para transformar datos directamente en plantillas. Crearemos un pipe llamada TranslatePipe que utiliza un servicio de traducción para devolver el valor traducido.

Código de Pipe

import { Pipe, PipeTransform } from '@angular/core';
import { TranslationService } from '../services/languageService.service';

@Pipe({
  name: 'translate',
  pure: false // Allows automatic recalculation when the language changes
})
export class TranslatePipe implements PipeTransform {
  constructor(private translationService: TranslationService) {}

  transform(value: string): string {
    return this.translationService.translate(value);
  }
}

¿Por qué pure: false? Establecer esta propiedad garantiza que Angular vuelva a ejecutar la pipe cada vez que cambie el idioma, lo que evita problemas de actualización de traducción en las plantillas.

Implementación del servicio de traducción

Ahora, vamos a crear un servicio de traducción que gestione los idiomas soportados y proporcione la traducción correcta. Todas las traducciones se cargan directamente desde el Frontend, ¡sin necesidad de llamadas a la API!

import { computed, Injectable, Signal, signal } from '@angular/core';
import * as en from '../../../../src/assets/i18n/en.json';
import * as ita from '../../../../src/assets/i18n/ita.json';

@Injectable({
  providedIn: 'root'
})
export class TranslationService {
  private language = signal<'ita' | 'en'>('ita'); // Default language

  private translations = computed(() => {
    return this.language() === 'ita' ? ita : en;
  });

  setLanguage(lang: 'ita' | 'en') {
    this.language.set(lang);
  }

  translate(key: string): string {
    const translations = this.translations() as Record<string, string>;
    return translations[key] || key;
  }
}

Uso de signals: Utilizamos signals y computación para garantizar que los cambios de idioma actualizan automáticamente las traducciones sin realizar nunca peticiones HTTP.

Usándolo en una plantilla

Ahora podemos utilizar pipe directamente en las plantillas de Angular.

<h1>{{ 'HELLO' | translate }}</h1>
<p>{{ 'WELCOME' | translate }}</p>

<!-- Buttons to change language -->
<button (click)="changeLang('ita')">🇮🇹 Italiano</button>
<button (click)="changeLang('en')">🇬🇧 English</button>

Cuando el usuario pulsa un botón, cambia el idioma de la aplicación y los textos se actualizan automáticamente sin interactuar con un backend.

Integración en un componente

Por último, vamos a gestionar el cambio de idioma dentro de un componente Angular.

import { ChangeDetectorRef, Component, OnInit, inject } from '@angular/core';
import { TranslationService } from '../services/languageService.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  translationService = inject(TranslationService);

  constructor(private cdr: ChangeDetectorRef) {
  }

  ngOnInit() {}

  changeLang(lang: 'ita' | 'en') {
    this.translationService.setLanguage(lang);
    this.cdr.detectChanges();
  }
}

Forzamos la detección de cambios (detectChanges) para asegurar que Angular actualiza las plantillas con el nuevo idioma.

Conclusión

Hemos creado un pipe de traducción dinámica que aprovecha las signals para permitir un cambio de idioma suave y reactivo. Todas las traducciones se gestionan completamente en el Frontend, evitando llamadas a la API y mejorando el rendimiento.

✅ Ventajas de este enfoque:

🚀 Cero llamadas HTTP: todo se gestiona localmente.
⚡ Cambio instantáneo de idioma sin retardo de red.
📂 Gestión sencilla de archivos JSON directamente en el proyecto.
🔧 Fácil mantenimiento y escalabilidad.
Este enfoque es escalable, fácil de mantener y te permite tener una app multi-idioma de alto rendimiento sin necesidad de librerías externas como ngx-translate.

🔥 Si te ha parecido útil este artículo, ¡sígueme para más conocimientos sobre Angular y desarrollo frontend! 🚀

Gracias por formar parte de la comunidad

Fuente