🚀 Introducing Transloco: Angular Internationalization Done Right

For a while I’ve been thinking about creating an Angular i18n library, which incorporates some concepts I had in mind.

A couple of weeks ago I was bored 😀, so I decided that it’s time to take the bull by the horns and go ahead and create a robust library, chock-full of all the features I’d expect from such a library.

I recruited

Shahar Kazaz

and

Itay Oded

to the task; Together, we worked hard over the weeknights, and that’s how Transloco was born.

ngneat/transloco

I’ve also created the ng-neat organization, to hold all my open source libraries. Currently it only holds Transloco, but I also plan to transfer Spectator, ngx-until-destroy, ngx-content-loader, and any future open-source Angular libraries I create.

Let’s take a look at what Transloco has to offer.

Install the library using Angular CLI:

ng add @ngneat/transloco

As part of the installation process you’ll be presented with questions; Once you answer them, everything you need will automatically be created for you. Let’s take a closer look at the generated files.

First, Transloco creates boilerplate files for the requested translations:

Next, it injects the TranslocoModule into the AppModule, and sets some default options for you:

Let’s explain each one of the config options:

• reRenderOnLangChange: Applications that don’t allow the user to change the language in runtime (i.e., from a dropdown), should leave it false. It can save on memory by rendering the view once and unsubscribing from the language changes event (defaults to false)
• defaultLang: Sets the default language
• fallbackLang: Sets the default language/s to use as a fallback
• failedRetries: How many time should Transloco retry to load translation files, in case of a load failure (defaults to 2)

It also injects the httpLoader into the AppModule providers:

The HttpLoader is a class that implements the TranslocoLoader interface. It’s responsible for instructing transloco how to load the translation files. It uses Angular HTTP client to fetch the files, based on the given path.

Translation in the Template

Transloco provides three ways to translate your templates:

Using the Structural Directive

This is the recommended approach. It’s DRY and efficient, as it creates one subscription per template:

Note that the t function is memoized. It means that given the same key it will return the result directly from the cache.

Using the Attribute Directive

Using the Pipe

Programmatical Translation

Sometimes you may need to translate a key in a component or a service. To do so, you can inject the TranslocoService and use its translate method:

😱 But Wait — There’s More!

This was just a taste of Transloco, it also supports:

✅ Clean and DRY templates

✅ Support for Lazy Load

✅ Support for Multiple Languages

✅ Support for Multiple Fallbacks

✅ Support for Testing

✅ Hackable

✅ Schematics

✅ L10N

You can find everything you need, along with examples, in our official docs file.

Migration from ngx-translate

Transloco provides a schematics command that will help you with the migration process.

Happy translating, and don’t forget to show your appreciation by starring!

⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

Additional Resources

A Better Translation Experience With Transloco

Lazy Load Translation Files In Angular Using Transloco

Using MessageFormat with Transloco

🎉 Good Things Come to Those Who Wait: What’s new in Transloco

Creating Search Engine-Friendly Internationalized Apps with Angular Universal and Transloco 🌐

And more.

Follow me on Medium or Twitter to read more about Angular, Akita and JS!