Blog

Our Angular package is here to help you localize and translate your Angular applications.
👋 Say goodbye to complicated XLF files and enjoy our translation interface!

Once you’ve installed it and configured your project, prepare your code using the Angular’s i18n syntax (see below), run npm run translation:sync or yarn translation:sync to push your translatable text to Translation.io and invite translators to our interface.

Angular’s internationalization (i18n) syntax

Simply update the translatable parts of your code using the official Angular i18n syntax, summarized below with a few examples.

Syntax in component templates (i18n attribute)

<!-- The i18n attribute is your friend -->
<h1 i18n>Welcome to our Angular application!</h1>

<!-- Specifying a context -->
<h1 i18n="Welcome message|">Welcome to our app!</h1>

<!-- Variable interpolation -->
<!-- Translators will see "Hi {name}, welcome to your dashboard!" -->
<p i18n>Hi {{ name }}, welcome to your dashboard!</p>

<!-- Simple HTML tags -->
<!-- Translators will see "Text with <1>HTML</1> tags." -->
<p i18n>Text with <em>HTML</em> tags.</p>

<!-- Nested HTML tags -->
<!-- Translators will see "Text with a <1><2>partly-emphasized</2> link</1>." -->
<p i18n>Text with a <a href="#"><em>partly-emphasized</em> link</a>.</p>

<!-- Translatable attribute -->
<img [src]="cat.png" i18n-alt alt="A fluffy cat" />

<!-- Translatable attribute with a context specified -->
<img [src]="cat.png" i18n-alt="Alt. text for image|" alt="A fluffy cat" />

<!-- ICU plural form -->
<!-- Translators will see "There are no cats", "There is one cat", "There are {x} cats" -->
<p i18n>{count, plural,
  =0 {There are no cats}
  one {There is one cat}
  other {There are {{count}} cats}
}</p>

Syntax in component classes or functions ($localize `text`)

// Simple use of the $localize function
let text = $localize `Welcome to our Angular application!`;

// Specifying a context
let text = $localize `:Welcome message|:Welcome to our app!`

// Variable interpolation
// Translators will see "Hi {name}, welcome to your dashboard!"
let text = $localize `Hi ${name}, welcome to your dashboard!`

Learn more about the syntax and read our recommendations on our GitHub Repository.

Relax, we handle plural forms for you

Pluralization can be complicated to manage, for you and your translators, because the rules vary depending on the target locales. That’s why we solve this pain for you.

Instead of having to translate cryptic segments like this one…

{count, plural, 
  =0 {There are no cats} 
  one {There is {{count}} cat } 
  other {There are {{count}} cats}}

…your translators will see the following in our interface:

In this example, the target language is Russian, which has more plural forms than English:

• “one” is for 1, 21, 31, 41, 51, etc.
• “few” is for 2~4, 22~24, 32~34, etc.
• “other” is for 5~19, 100, 1000, etc.

Small improvements like this can make a big difference, by eliminating plural errors which can be difficult to detect and correct within your application.

You can find all the rules governing plurals as applied by Translation.io, together with the suggested examples, on this List of Languages and their Plural Cases.

Why use Translation.io for your Angular app?

We simplify the translation process, for you and your translators, with useful features such as machine-translation (using Google Translate or DeepL), easy keyboard shortcuts, the use of tags and comments, translation memory and segment history.

How this package works

We rely on Angular’s extract-i18n command (xi18n for Angular version <= 10) , which extracts translatable text from your application to a XLF file (messages.xlf). We parse this file and send the source keys to our platform for your translators to work on. If you already have a translated XLF file (ex: messages.fr.xlf for French) before running our init process, we also parse it to import your translations to our platform.

Further reading

• Check out our GitHub repository for more details about our package (installation, configuration, usage).
• Explore Angular’s official i18n guide to set your application up properly.

Need help or have a question? Feel free to write us on contact@translation.io and we’ll gladly provide assistance.

You can now use DeepL alongside Google Translate to automatically translate your applications. DeepL is a machine translation service which uses neural networks trained from the Linguee database.

Blind tests conducted by DeepL have ranked it well above other competitor machine-translation solutions. This is backed up by the quality of the translations produced, which are found to be more subtle and precise.

Depending on the case, and their availability, you can therefore use DeepL or Google Translate for each of your target languages. This applies to both the machine-translation used in the synchronization process, and to the suggestions offered to the translators as they work.

You can find a list of all the languages supported by DeepL on our languages page.

High Speed Machine Translation

In adding this feature, we took the opportunity to radically speed up the machine translation process.

It is now possible to automatically translate up to 400 segments per second during a synchronization. This means that a project with 100 additional sentences to translate into 20 languages will only take 5 seconds of synchronization time to auto-translate.

This is 10 times faster than our previous auto-translation times, and goes hand in hand with the constant speed improvements you are probably already aware of.

For many years we had been looking for the best way to localize a JavaScript and/or React project with Translation.io.

Most of the solutions we found seemed too complex for developers, owing to their verbose syntax or keys which have to be created manually. They were also over-complicated for translators who sometimes would have to translate such phrases as:

{count, plural, =0{no results} one{one result} other{# results} }

All these issues vanished the day we discovered LinguiJS.

Lingui is an extremely light, open-source library which can be used to localize a JavaScript or React application. The code remains clean and legible and there is no need to manage the keys manually.

While its low-level API is similar to that of React Intl (FormatJS), it is possible to access a higher level of abstraction which makes the code more compact, meaning that translators don’t have to translate any complex ICU MessageFormat syntax.

But enough talk! The following examples speak louder than words:

React JSX Syntax

<!-- Regular -->
<Trans>
  Text to be translated
</Trans>

<!-- Variable Interpolation -->
<Trans>
  Hello {name}
</Trans>

<!-- Simple HTML Tags. -->
<!-- Translators will see "Text with <0>HTML</0> tags" -->
<Trans>
  Text with <em>HTML</em> tags
</Trans>

<!-- Complex HTML Tags -->
<!-- Translators will see "Text with a <0>link</0>" -->
<Trans>
  Text with a
  <a href="https://google.com" target="_blank">link</a>
</Trans>

<!-- Plural -->
<!-- Translators will see "You've got 1 message" and "You've got # messages" -->
<Plural
  value={count}
  one="You've got 1 message"
  other="You've got # messages"
/>

JavaScript Syntax

// Regular
t`Text to be translated`

// Variable Interpolation
t`Hello ${name}`

// Plural
plural(count, {
  one: "You've got 1 message",
  other: "You've got # messages"
})

// Variable interpolation
plural(count, {
  one: `Hello ${name}, you've got 1 message`,
  other: `Hello ${name}, you've got # messages`
})

The advantage of Translation.io is that translators can see the exact number of plural forms in the current target language, as well as some examples to help them. They don’t need to translate unmeaningful syntax or add the missing forms themselves.

In this example, Czech uses 3 plural forms: one, few and other.

Rather than create our own plugin to use with Lingui, we have chosen to directly integrate our synchronization workflow into their open-source code, while making it easy for other competitor cloud providers to integrate their workflow later on.

We are convinced that Lingui is the solution for efficient localization in JavaScript and React, which is why we have put our money where our mouth is: we are now one of their principal sponsor, and plan to continue to support them for a long time to come.

Some links to get started:

• Our GitHub repository which contains the installation instructions.
• Lingui official documentation and the page presenting Translation.io.

At Translation.io, we systematically implement the latest Unicode standards for the rules governing plurals. These rules are applied in our translation interface, and where possible, in the files sent back into your application.

You may already be aware that each language has a set number of plural forms, ranging from 1 for Chinese to 6 for Arabic.

There are clear rules, based on quantity, governing the plural form which will apply in a given context.

Here is an example of two languages with the same number of plural forms but to which different rules apply according to the quantity.

Plural forms of English

• 0 emails (other plural form).
• 1 email (one plural form).
• 2 emails (other plural form).

Plural forms of French

• 0 e-mail (one plural form).
• 1 e-mail (one plural form ).
• 2 e-mails (other plural form).

You can see that for a quantity of 0, in English it is the form other that applies, while in French it is the form one.

When faced with an increasing number of plural forms, this can soon become quite complicated to manage. This is why we automatically show your translators the correct number of plural forms to translate in their interface according to the target language selected.

In this example, Czech uses 3 plural forms: one, few and other.

And as the names given by the Unicode standard to the plural forms can be ambiguous, we have added a concrete example of each form in the translator’s language.

Small improvements like this can make a big difference, by eliminating plural errors which can be difficult to detect and correct within your application.

You can find all the rules governing plurals as applied by Translation.io, together with the suggested examples, on this List of Languages and their Plural Cases.

We recently improved the translation interface to allow several segments to be selected at once. This multiple selection is done using the keyboard and mouse just like in your usual file explorer.

We have used the conventional shortcuts of your Operating System:

• Ctrl⁽¹⁾ + click to select the segments one by one.
• ⇧ Shift + click to select groups of segments.

You can also use the keyboard shortcuts to navigate between segments:

• Ctrl⁽¹⁾ + ↑ or ↓ to navigate between segments.
• ⇧ Shift + ↑ or ↓ to extend or reduce the group of segments selected.

To select all the segments currently filtered, you can click on the checkbox beside the filters or simply use Ctrl⁽¹⁾ + A. To deselect the active selection, simply click outside of the interface.

For the time being, it is only possible to add or remove tags in bulk, but we are working on other functionalities like scoped statistics on the selected segments, or exporting translations into the most common formats.

⁽¹⁾ Please note that Ctrl is replaced by ⌘ Cmd on MacOS.