Documentation

Le t pipe

Tout ne peut pas être intégré dans un seul composant. Les attributs tels que placeholder ou title prennent une chaîne, et parfois tu as besoin d'une traduction dans ton code TypeScript. Pour cela, utilise la méthode t pipe ou translate du service MagicTranslate.

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

Le pipe renvoie le texte d'origine jusqu'à ce que la traduction soit chargée. Comme le composant <t>, il prend la langue et la formalité comme options :

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

Il faut également un id pour modifier cette utilisation du texte de manière autonome :

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

Variables

Transmet des valeurs qui ne doivent pas être traduites en v et les référencer par $name, comme pour le composant <t> :

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


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

Le texte est traduit une fois sous la forme Search {0} products, et la traduction mise en cache est réutilisée en cas de modification de count.

Traduire en code

Pour traduire une chaîne en TypeScript, appelle translate sur le service MagicTranslate. Cela renvoie une promesse.

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

Sans l'option lang, le texte est traduit dans la langue actuelle.

translate prend également en compte des variables :

const message = await magicTranslate.translate('Your order $id has shipped', {
  v: { id: order.id }
});
PrécédentLe composant <t>SuivantPrérendu