Source code ofGit repository

➤ Create a new Angular project by the below command.

ng new i18n ––routing

➤ Now go to the root folder and run this project and check on localhost:4200 in a browser

cd i18n ng serve -o

So let’s start with creating components and set routing with a nice bootstrap header for redirection to the different pages.

Go to the terminal and create 3 components

ng g c profile

ng g c blog

ng g c certificate

It will create 3 components with HTML, CSS, spec and ts files.

Now go to the app-routing.module.ts file and set the routing as shown in the below image.

Now create a good bootstrap header in app.component.html and app.component.ts file like, below image.

Note: –I have used bootstrap CDN for some design purpose, so you need to add CDN in index.html file or to use package.json as per your choice, or you can use your own CSS for the header.

And now, ifyou run this project, then its output is something like the below image.

I hope your Angular project is running without any error, so now we can start to implement internalization in this project.

So in this project, we are going to add 3 languages support, which are English, Hindi, and Gujarati, and for that, we need to create 3 JSON files that refer to those languages, and then we will use that file in our project for language support.

So first, go to the assets folder which is inside the src/assets and create 1 folder named i18n and inside that create a 3 language JSON file with some key-value pair as I show in the images below…

(1 ) English.json

(2) Hindi.json

(3) Gujarati.json

Now we need to install 2 dependencies by using the below command.

npm install @ngx-translate/core @ngxtranslate/http-loader

So now we need to use TranslateModule, TranslateLoader from @ngx-translate/core, and TranslateHttpLoader from @ngxtranslate/HTTP-loader in app.module.ts for configuration ofthe language-translation.

As I show in the below image, we need to create a function “createTranslateLoader” and need to add in an import array as well for configuration ofthe language JSON files, which we created earlier.

As we are using HTTP so we will be required to import HttpClientModule as well in the app.module.ts file, as shown in the above image.

Now we are almost ready to show the different languages.

First, we need to set the default language in a constructor ofapp.component.ts file as shown in the below image.

-> this.translate.use(‘English’);

Now select the different languages we need to set in a translation.

We need to create a method and set it to the dropdown language select in app.component.html and app.component.ts file just like below image

Now the central part comes into the picture. Where precisely, we want to show the different languages we need to use a translation pipe, just like in the image below.

In the above image, you can see that we replace Profile to {{‘header.profile’ | translate}}, so basically header and profile is a key in the language JSON file like.

So ifwe want to show “Welcome to the profile page.” then we need to do something like.

So now we are done with internalization or i18n or Multi-language support in our Angular project.

You can save all the changes and run this project on the browser, and you will see the changes.

Output Video link:- https://drive.google.com/file/d/1kUmjbv6B xeapvn2Qx0MEBL5XWF5xjXRy/view? usp=sharing

(4) Source code of Git repository.

Github:- https://github.com/parthsardhara/ NG-Internationalization-i18n

Project Setup:-

⦿ co Clone mmand. this project using the below ⦾git clone https://github.com/parthsardhara/NGInternationalization-i18n.git ⦿ G ⦾ cd o to NG- t I he project root folde nternationalization- r. i18n ⦿ ⦾ In np stall m in node stall modules dependency by ⦿ ⦾ Run ng se this rve pro or n jec g s t by ⦿ loca Go lhos to t:42 th 00 e browser and check on

Wrapping Up

I hope you have enjoyed reading this blog post. Ifyou are looking for a helping hand to build Angular application with Internationalization (I18N) or looking for support with your existing app, then get in touch with us to integrate skilled and seasoned Angular developers into your existing team. We are a top-rated Angular appliaction development company, offering the best Angular development services and also let you hire dedicated Angular application developers at your convenience engagement model.