Magic Translate vs. Angular i18n
Angular apps are usually translated with one of three tools: Angular's built-in i18n, ngx-translate or Transloco. All three need the translations for every language before you release. Magic Translate translates the text in your templates directly, without translation files.
At a glance
| Magic Translate | Angular i18n | ngx-translate and Transloco | |
|---|---|---|---|
| How you write text | Your own words, in <t> or the t pipe | Your own words, marked with i18n | A key per text |
| Translations | AI translation, created automatically | Extracted to XLIFF files and translated by you | JSON files per language, written by you |
| Switching languages | At runtime | One build per language | At runtime |
| Server rendering | Yes, translated at build time with prerendering | Yes | Yes, with extra setup |
| Price | Free plan, then monthly plans based on usage | Free, part of Angular | Open source and free |
How the code differs
With Angular's built-in i18n, you mark the text, extract it and translate the extracted file for every language:
<h2 i18n>Your shopping cart</h2>
ng extract-i18n# then translate messages.xlf into messages.de.xlf, messages.fr.xlf, …# and build the app once per language
With ngx-translate or Transloco, each text has a key, and the translations live in JSON files:
<!-- ngx-translate --><h2>{{ 'cart.title' | translate }}</h2><!-- Transloco --><h2>{{ 'cart.title' | transloco }}</h2>
With Magic Translate, you write the text and release your app:
<h2><t>Your shopping cart</t></h2><input [placeholder]="'Search products' | t" />
When to choose Magic Translate
- You want your Angular app in many languages without extracting, translating and loading files.
- You want users to switch languages without reloading the app or building it once per language.
- Your texts change often, and you want every language to stay up to date.
When to choose Angular i18n, ngx-translate or Transloco
- Every text must be translated or reviewed by a person.
- You need exact control over plurals and wording in each language.
- You want a free solution with no external service.
Moving to Magic Translate
You can switch one component at a time. Replace the key or the i18n attribute with the English text in <t>, or use the t pipe for attributes. The Angular guide shows the setup.
Ready to try it? Follow the getting started guide to translate your first component in five minutes.