Contents   hide

1) Angular 12 with ngx-translate

2) Add ngx-translate to angular app

3) Setup translations JSON file

4) Create Internationalization Module

4.1) Internationalization Module

4.2) Localization Configuration Service

4.3) Localization Service

5) Using Internationalization Module

5.1) Using translate method

5.2) Using translate pipe

This tutorial will see how we can Easily Translate the Angular 12 App Using the library

Angular 12 with ngx-translate

The internationalization (i18n) library for Angular

ngx-translate:

It is an internationalization library for Angular. It will let you define translations for your content in different languages and you can switch languages easily.

The ngx-translate library provides you a service, a directive, and a pipe to handle any dynamic or static content.

NGX-Translate is also extremely modular. It is written in a way that makes it really easy to replace any part with a custom implementation in case the existing one doesn’t fit your needs.

Add ngx-translate to angular app

Let’s first import the ngx-translate library using the NPM command, Here we going to import 2 packages of ngx-translate

• @ngx-translate/core: ^13.0.0 – contains core methods
• @ngx-translate/http-loader: ^6.0.0 – contains methods to load translation files.

#angular 12 #i18n #internationalization