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' }" />

Também é necessário um id para editar esse uso do texto sozinho:

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

Variáveis

Passe valores que não devem ser traduzidos em v e faça referência a eles como $name, da mesma forma que com o 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" />

O texto é traduzido uma vez como Search {0} products e a tradução em cache é reutilizada quando count muda.

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.

translate também usa variáveis:

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});
AnteriorO componente <t>PróximoPré-renderização