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' }" />
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 optionsconst formal = await magicTranslate.translate('How are you?', {lang: 'fr',formality: 'formal'});
Sin la opción lang, el texto se traduce al idioma actual.