Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      Franklin Templeton
      Franklin Templeton
      The Container Store
      The Container Store
      KPMG
      KPMG
      AdviceWorks
      AdviceWorks
      Bridgestone
      Bridgestone
      NatWest Markets
      NatWest Markets
      Shell
      Shell
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      United Parcel Service
      United Parcel Service
      Academy Sports & Outdoors
      Academy Sports & Outdoors

      Case Studies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang AI & ML Data Science Java
      Python Salesforce DevOps Laravel Mobile App Embedded & Hardware

      Industries

      Information Technology BFSI Education Marketing & Advertising Manufacturing Retail Logistics & Transportation
      Healthcare eCommerce Public Services Travel & Hospitality Cloud Telecommunications Real Estate
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      SAP Solutions

      SAP Consultation

      Innovate

      Robotic Process Automation Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Cloud - Bacancy Combat Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller AC Charger Explore All

      not list

      CCS2 Controller DC Fast Charger AC Charge Controller
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
hire developers

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

06

World wide offices

12+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Case Studies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
      Industries
      • Information Technology
      • BFSI
      • Education
      • Marketing & Advertising
      • Manufacturing
      • Retail
      • Logistics & Transportation
      • Healthcare
      • eCommerce
      • Public Services
      • Travel & Hospitality
      • Cloud
      • Telecommunications
      • Real Estate
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      SAP Solutions
      • SAP Consultation
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Cloud - Bacancy Combat
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • AC Charger
    • DC Fast Charger
    • AC Charge Controller
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
Internationalization in Angular

How to Implement Internationalization (i18n) in Angular Application(Multiple Language Support with Example)

Binal Patel
Binal Patel CTO
Last Updated on July 4, 2022 | Written By: Parth Sardhara
July 22, 2020 6 min read

Hello again!

I am writing this blog to get you through one of the easier ways to implement multi-language support in Angular application, and if you follow all the instructions that I am going to discuss in this blog post, then I am pretty sure that you will have your own multi-language support Angular application.

Table of contents:-

(1) What is Internationalization or i18n in Angular Application?

(2) What is multi-language support work in Angular application?

(3) How to implement Internationalization in Angular Application?

(4) Source code of Git repository.

(1) What is Internationalization or i18n in Angular Application?

➤ So Internationalization or i18 is a feature that is provided by the Angular team to support multi-languages on a website.

➤ By using Internationalization, users can change the language and can understand more about the website content in a supportive language.

➤ For more information, you can visit official website https://angular.io/guide/i18n

(2) What is Multi-Language Support Work in Angular Application?

➤ Multiple language support is to offer support for different languages on a website or web page.

➤ By which users can change the language, and some content will be changed based on language preference.

(3) How to implement Internationalization in Angular Application?

➤ Let’s do some practice with the new Angular project, so before finishing this blog, you will have a good multi-language support application ready.

➤ So first of all, let’s create a new project.

➤ Here I am using Angular version 9.

angular application

➤ 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.

app routing module ts

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.

bootstrap CDN

appcomponent

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

project run

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

English json

(2) Hindi.json

hindi json

(3) Gujarati.json

gujarati json

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

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

So now we need to use TranslateModule, TranslateLoader from @ngx-translate/core, and TranslateHttpLoader from @ngx-translate/HTTP-loader in app.module.ts for configuration of the 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 of the language JSON files, which we created earlier.

createTranslateLoader

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 of app.component.ts file as shown in the below image.

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

angular application

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

angular

public array

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.

 translation pipe

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.

header profile

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

profile welcome

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/1kUmjbv6Bxeapvn2Qx0MEBL5XWF5xjXRy/view?usp=sharing

(4) Source code of Git repository.

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

Project Setup:-

⦿ Clone this project using the below command.

⦾ git clone https://github.com/parthsardhara/NG-Internationalization-i18n.git

⦿ Go to the project root folder.

⦾ cd NG-Internationalization-i18n

⦿ Install node modules dependency by

⦾ npm install

⦿ Run this project by

⦾ ng serve or ng s

⦿ Go to the browser and check on localhost:4200

Wrapping Up

I hope you have enjoyed reading this blog post. If you 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.


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

Angularjs Development Tools
Reynal Dsouza

July 11, 2023

AngularJS

15 Best AngularJS Development Tools to Know in 2023

By : Reynal Dsouza

Quick Summary: The blog covers a well-curated list of top AngularJS Development Tools. Discover a handpicked selection that will empower your development process and elevate...

< 1 Minute Read
Read More
Dockerize Angular Apps
Ritwik Verma

June 14, 2023

AngularJS

Steps to Dockerize Angular Apps With Docker Containerization

By : Ritwik Verma

Quick Summary: As technological advancements take a step further to change our daily lives. Every business owner strives for faster, more efficient, and more effective...

< 1 Minute Read
Read More
OpenAI Image Creation API in Angular
Ritwik Verma

May 15, 2023

AngularJS

The Need for OpenAI Image Creation API in Angular Applications

By : Ritwik Verma

Quick Summary: AI or Artificial Intelligence is the new dawn of the evolution of human intellect with the potential to revolutionize the world. Whether it...

8 Minute Read
Read More

How Can We Help You?

india India (HQ)

Corporate House
15-16, Times Corporate Park, Thaltej, Ahmedabad, Gujarat 380059

USA USA

601 Brickell Key Drive, Suite 700, Miami, Florida, 33131, USA

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Get in Touch

call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Employee
  • Brochure
  • Quality Assurance
  • Resources
  • Privacy Policy
  • Sitemap
  • Solutions
  • Careers
  • Testimonials
  • Tutorials
  • QandA
  • Contact Us
  • bacancy google review 4.6
    bacancy google review
    bacancy glassdoor review 4.5
    bacancy glassdoor review
    bacancy clutch review 4.8
    bacancy clutch review
    bacancy goodfirms review 4.8
    bacancy goodfirms review
    iso
    X

    Get Our Newsletter

    Be The First To Get The Latest Updates And Tutorials.

    Request A Free Consultation