Documentação

O t pipe

Nem tudo pode ser encapsulado em um componente. Atributos como placeholder ou title usam uma string e, às vezes, você precisa de uma tradução em seu código TypeScript. Para isso, use o método t pipe ou translate do serviço MagicTranslate.

O 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 {}

O pipe retorna o texto original até que a tradução seja carregada. Como o componente <t>, ele usa a linguagem e a formalidade como opções:

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

Traduzindo em código

Para traduzir uma string no TypeScript, chame translate no serviço MagicTranslate. Ele retorna uma promessa.

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'
});

Sem a opção lang, o texto é traduzido para o idioma atual.

AnteriorO componente <t>PróximoPré-renderização