Cómo pasar parámetros a las traducciones en Angular con ngx-translate
Aprende a gestionar traducciones dinámicas en Angular utilizando ngx-translate. Este artículo detalla cómo pasar parámetros a las cadenas de texto traducidas, mejorando la flexibilidad y personalización de tu aplicación.
¿Qué es ngx-translate y cómo funciona?
ngx-translate es una biblioteca de internacionalización para Angular que permite manejar traducciones de manera eficiente. Una de sus características más útiles es la capacidad de interpolar valores dinámicos dentro de las cadenas traducidas.
Pasar parámetros a las traducciones
Para pasar parámetros, necesitas definir una clave de traducción con marcadores de posición en tus archivos de traducción. Luego, utiliza TranslateService o el pipe translate para proporcionar los valores de los parámetros en tiempo de ejecución.
1. Definir traducciones con parámetros
En el archivo de traducción (por ejemplo, es.json):
{
"WELCOME_MESSAGE": "Bienvenido, {{name}}!"
}
2. Usar el pipe translate en la plantilla
En un componente HTML:
<p>{{ 'WELCOME_MESSAGE' | translate:{ name: 'Carlos' } }}</p>
3. Usar TranslateService en el componente TypeScript
En el archivo .ts del componente:
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
template: '<p>{{ translatedText }}</p>'
})
export class AppComponent {
translatedText: string;
constructor(private translate: TranslateService) {
this.translate.get('WELCOME_MESSAGE', { name: 'Carlos' }).subscribe((res: string) => {
this.translatedText = res;
});
}
}Algunos ejemplos
1. Mensaje de confirmación de acción
{
"DELETE_CONFIRM": "¿Estás seguro de que quieres eliminar {{item}}?"
}<p>{{ 'DELETE_CONFIRM' | translate:{ item: 'archivo' } }}</p>2. Formato de fecha dinámico
{
"DATE_MESSAGE": "Hoy es {{date}}."
}const today = new Date().toLocaleDateString();
this.translate.get('DATE_MESSAGE', { date: today }).subscribe(console.log);Referencia oficial
Consulta la documentación de ngx-translate para más detalles y ejemplos.
Jorge García
Fullstack developer