A Better Translation Experience With Transloco

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

Meet the new angular’s I18n translation library for translation, learn about some of its great features and discover how they can benefit you for an easier translation experience!

Two weeks ago we finally released Transloco - An I18n translation for Angular!, and it comes with many wonderful features that make translation much easier. In this article, we will go over some of my favorite features in Transloco, and see how they can benefit us.

Installation

Transloco comes with a build-in schematics and ng add command. So in order to install Transloco you could simply type ng add @ngneat/transloco . which will install the library for you including with simple config for your preferences questions.

Simple Usage

After we have successfully installed Transloco let’s start using it by creating a new component with translation. For our convenient we could use again the schematics and run:

ng generate @ngneat/transloco:component translate-component

It will create a standard component with the following HTML:

As you can see, the ng-template element uses Transloco directive. It enabled us to access the current translation object which declared as “t”.

Now, let’s test it by adding buttons which will switch the active language:

Now, let’s implement setActiveLang method. We do that by injecting TranslocoService to our component and call setActiveLang with the correct language.

Now whenever we click on the button, the translation should change accordingly.

Dynamic usage

So, after the simple usage, there might be some cases when you need the translation string to accept parameters. Transloco enables us to pass any number of optional parameters to fine-tune the output by using the translocoParams pipe.

The parameter value can be any valid template expression such as a string literal or a component property.

For example, let’s create a dynamic key in our translation file:

And now, simply use it in our component:

️Scope usage

As our application grows, the translation files become large and hard to maintain, and we will probably want to separate them into scope. Luckily Transloco has a great solution for scopes, and enable us to easily separate our files and easily create translation scope folders.

In order to use scope first, create a new folder for your scope under the i18n folder with new translation files:

Under my-scope/ :

Now we can simply declare the Scope provider (on both component or module) which let Transloco know the scope that should be used:

providers: [{provide: TRANSLOCO_SCOPE, useValue: 'my-scope'}]

Now, whenever we need to use the scope files, Transloco will automatically load it for us and use them for translations.

Alternatively, you could simply define which scope you use inside the template, by passing the directive the scope value:

Multiple Languages

Transloco also supports an in template multi-language.

Setting a translation language for a specific template can be easily done by passing the language name in the ‘lang’ argument to the structural directive.

For example:

Testing Module

In order to test our translations, Transloco provides us with a TranslocoTestingModule.

This mock module allows us to pass a translation mock object, which will be used for our test suit and by that easily test our translations:

Behold the Future 🎉

So we learned few of the methods of translating angular applications with Transloco, and few of its features that make the translation easier.

Stay tuned for upcoming future development! We are actively maintaining the library, and have many upcoming features planned that will make your translations experience even better!

Special thanks to Noa Barki for the review 🙏🙏