One of the most popular open-source i18n libraries, ngx-translate, lets you define translations for your app and switch between them dynamically. You can either use a service, directive, or pipe to handle the translated content. In this Angular 13 tutorial, we will learn how to use them all with the help of a small demo app.

For demonstration purposes, we will create a sample feedback form for Phrase, the most reliable software localization platform on the market, and launch our demo app in two different languages—English and German.

You can access the demo app via Google Firebase to understand how ngx-translate works with an Angular 13 app in a production environment. To get the source code for the demo app, make sure you stop by at GitHub.

???? Note » Make sure you have an Angular dev environment set up on your machine. Should this not be the case, please refer to the Angular setup guide.

Contents

• Why use ngx-translate instead of Angular i18n?
• Configuring ngx-translate for an Angular app
• Updating the AppModule
• Creating a nav-bar component
• Creating a model
• Creating translation files
• Using the translate pipe
• Using the translate directive
• Dynamic translation keys
• Fetching a translation key in TypeScript files
• Miscellaneous example component
  • Configuring the app to use pluralization with ngx-translate
  • Updating the translation file
  • Adding pluralization
  • Using the translate pipe with built-in Angular pipes
  • Using raw HTML tags within a translation
• Exploring TranslateService
• Creating a Feedback Component
• Angular I18n Execution Demo
• Concluding our Angular i18n tutorial with ngx-translate

Why use ngx-translate instead of Angular i18n?

The Angular framework has a robust built-in i18n library. However, the ngx-translate library has some shiny advantages over the built-in one:

• The ngx-translate library allows us to change the language of the application at runtime without reloading the whole app. However, Angular allows us to use only one language at a time. If you want to use a different language, then you need to reload the application with a new set of translations.
• The ngx-translate library allows us to use JSON files for translation by default. We can also create our own loader to support any format we want. Angular supports only XLIFF and XMB files.
• The ngx-translate library has a wide range of APIs, which allows us to manipulate the translation data during runtime.

Configuring ngx-translate for an Angular app

Navigate to the directory where you want to create the new project. Open the command prompt, and run the command shown below to create a new Angular app named ngx-translate-i18n.

ng new ngx-translate-i18n --routing=false --style=scss

Run the following command to install the ngx-translate/core library in your app:

npm install @ngx-translate/core

We will need to install a loader that will help us load the translations from files using HttpClient. Run the command as follows:

npm install @ngx-translate/http-loader

We will add a separate module for ngx-translate. Run the following command to create a new module in your app.