El componente <t>

Incluye tu contenido en el componente <t> y el contenido se traducirá. El contenido original se muestra hasta que se cargue su traducción.

<t>This content will be translated</t>

El texto con encuadernaciones también funciona. El contenido se vuelve a traducir cada vez que cambia, por ejemplo, cuando name cambia:

<t>Hello {{ name() }}</t>

Todas las traducciones solicitadas al mismo tiempo se envían a la API en una sola solicitud y las traducciones se almacenan en caché. Puedes usar tantos componentes de <t> como quieras.

<mt-translate> funciona como selector alternativo y Translate es el mismo componente que T.

Entradas

<t lang="fr" formality="formal">How are you?</t>

Limitaciones

Hay muy pocas limitaciones:

1. No puedes poner los componentes Angular dentro del componente <t>. Los elementos HTML simples están bien (consulta el siguiente ejemplo). El marcado traducido pasa por el desinfectante HTML de Angular.
2. El contenido de un componente <t> no puede superar los 10 KB, es decir, unos 5000 caracteres.

<!-- this is OK, since <a> is a plain HTML element -->
<t>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</t>

<!-- this does NOT work, since <app-button> is an Angular component -->
<t>
  <app-button>Click me</app-button>
</t>

Para traducir atributos y otras cadenas, usa el t pipe.