Internationalization, sometimes referenced as i18n, is the process of supporting multiple languages in our applications. In this session, we will demonstrate how we can enable our angular application to target any language in the world using ngx-translate.

1. Internationalization in
Angular
Kiran Jeet, Neha Kumari

2. Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
 Punctuality
Join the session 5 minutes prior to the session start time. We start on
time and conclude on time!
 Feedback
Make sure to submit a constructive feedback for all sessions as it is very
helpful for the presenter.
 Silent Mode
Keep your mobile devices in silent mode, feel free to move out of session
in case you need to attend an urgent call.
 Avoid Disturbance
Avoid unwanted chit chat during the session.

3. 1. Internationalization
2. Using @angular/localize
3. Using ngx-translate
4. Demo

5. Internationalization
• Internationalization, sometimes referenced as i18n, is the process of designing and preparing your
project for use in different locales around the world.
• Localization is the process of building versions of your project for different locales. The localization
process includes the following actions:
 Extract text for translation into different languages
 Format data for a specific locale
• A locale identifies a region in which people speak a particular language or language variant. Possible
regions includes countries and geographical regions. A locale determines the formatting and parsing of
the following details.
• Measurement units including date and time, numbers, and currencies
• Translated names including time zones, languages, and countries

6. Refer to Locales by Id
• A locale ID specifies the language, country, and an optional code for further variants or subdivisions. A
locale ID consists of the language identifier, a hyphen (-) character, and the locale extension.
{language_id}-{locale_extension}

7. Using the localize package
• To take advantage of the localization features of Angular, use the Angular CLI to add
the @angular/localize package to your project.
ng add @angular/localize
• To creating a translation source file, run the following command in the CLI to create a translation
source file.
ng extract-i18n
• Configure the app to serve in multiple languages in your angular.json file.

8. Set the source locale ID
• Use the Angular CLI to set the source language in
which you are writing the component template and
code.
• By default, Angular uses en-US as the source
locale of your project.
• To change the source locale of your project for the
build, complete the following actions.
• Open the angular.json workspace build
configuration file.
• Change the source locale in the sourceLocale field.

9. Example using @angular/localize

10. https://angular.io/guide/i18n-example

11. Using ngx-translate
• Run the following command to install the ngx-
translate packages in Angular application.
npm i @ngx-translate/core --save
npm i @ngx-translate/http-loader –save
• Next, import and register
the TranslateModule in app.module.ts file.

12. Configure your typescript file

13. Configure translation file
• Open the assets folder and create “i18n” folder inside of it. In “i18n” folder, you have to
add lang.json files along with the country code.

14. Configure HTML