How to integrate Internationalization (i18) in Angular

Internationalization is the process of designing and preparing your app to be usable in different languages. i18n pipes will help you achieve the internationalization in your app. Let’s start on how to integrate internationalization in Angular.


Before continuing, check if you have following items installed on your machine:

  • Node.Js. If not, install it from here.
  • Angular. If not, install using command npm install -g @angular/cli

Step 1 – install @ngx-translate/core

Run below command to install the core library to translate our contents in different languages:

Step 2 – import the TranslateModule

Finally, you can use ngx-translate in your Angular project. You have to import TranslateModule.forRoot()  in the root NgModule of your application.

Step 3 – install a loader

By default, there is no loader available. You can add translations manually using setTranslation but it is better to use a loader. You can write your own loader, or import an existing one. We will use MultiTranslateHttpLoader in our project.

Run the command below to install loader:

Step 4 – import the MultiTranslateHttpLoader

Once you’ve decided which loader to use, you have to setup the MultiTranslateHttpLoader to use it.

Please note: We are going to create a folder within assets with name i18n. We will put our translation files there.

Step 5 – Init the TranslateService

Initialize a default language at app component load.

Step 6 – bind translation in template

The last step is to bind the translations keys inside html template.

I have incorporated the complete example in below Stackblitz editor.


We learnt how to integrate internationalization i18 in Angular application.

Hope you are able to integrate it in your project. Write me up for any problem you face while integration.

Thank you!

2 thoughts on “How to integrate Internationalization (i18) in Angular

Leave a Reply

Your email address will not be published. Required fields are marked *