Documentación

El t pipe

No todo puede estar envuelto en un componente. Los atributos como placeholder o title toman una cadena y, a veces, necesitas una traducción en tu código de TypeScript. Para ello, utiliza el método t pipe o translate del servicio MagicTranslate.

El t pipe

import { Component } from '@angular/core';
import { TranslatePipe } from '@magic-translate/angular';


@Component({
  selector: 'app-search',
  imports: [TranslatePipe],
  template: `<input [placeholder]="'Search products' | t" />`
})
export class Search {}

El pipe devuelve el texto original hasta que se cargue la traducción. Al igual que el componente <t>, toma el idioma y la formalidad como opciones:

<input [placeholder]="'Your name' | t: { lang: 'fr', formality: 'formal' }" />

También se necesita un id para editar este uso del texto por sí solo:

<button [title]="'Save' | t: { id: 'checkout-save' }"></button>

Variables

Pase valores que no deberían traducirse en v y haga referencia a ellos como $name, igual que con el componente <t>:

<input [placeholder]="'Search $count products' | t: { v: { count: products.length } }" />


<img [alt]="'Photo of $name' | t: { v: { name: user.name } }" [src]="user.photo" />

El texto se traduce una vez como Search {0} products y la traducción en caché se reutiliza cuando cambia count.

Traducir en código

Para traducir una cadena de TypeScript, llama al translate del servicio MagicTranslate. Devuelve una promesa.

import { inject } from '@angular/core';
import { MagicTranslate } from '@magic-translate/angular';


const magicTranslate = inject(MagicTranslate);
const message = await magicTranslate.translate('Your order has been placed');


// with options
const formal = await magicTranslate.translate('How are you?', {
  lang: 'fr',
  formality: 'formal'
});

Sin la opción lang, el texto se traduce al idioma actual.

translate también acepta variables:

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});
AnteriorEl componente <t>El siguientePrerenderización