Documentation

The <t> component

Wrap your content in the <t> component, and the content is translated. The original content is shown until its translation has loaded.

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

Text with bindings works too. The content is translated again whenever it changes, for example when name changes:

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

All translations requested at the same time are sent to the API in a single request, and translations are cached. You can use as many <t> components as you like.

<mt-translate> works as an alternative selector, and Translate is the same component as T.

Inputs

InputTypeDescription
formality'informal' | 'formal'Sets the formality of the translation.
langLanguageOverrides the language set with provideMagicTranslate.
<t lang="fr" formality="formal">How are you?</t>

Limitations

There are very few limitations:

  1. You cannot put Angular components inside the <t> component. Plain HTML elements are fine (see the example below). The translated markup goes through Angular's HTML sanitizer.
  2. The content inside a <t> component cannot exceed 10 KB, which is about 5,000 characters.
<!-- 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>

To translate attributes and other strings, use the t pipe.

PreviousAngularNextThe t pipe