Adding the internationalization (i18n) component to an Angular application
Introduction
Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 15 and Google is the main maintainer of the project.
@ngx-translate is an internationalization (i18n) component library with many configuration options.
Prerequisites
Before you start, you need to install and configure the tools:
Getting started
Create the Angular application
1. Let’s create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.
2. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post Adding the Bootstrap CSS framework to an Angular application.
3. Install the @ngx-translate/core and @ngx-translate/http-loader libraries.
4. Import the HttpClient, HttpClientMobule, TranslateModule, TranslateLoader and TranslateHttpLoader modules. Change the app.module.ts file and add the lines as below.
5. Create the de-DE.json, en-US.json, es-ES.json, fr-FR.json and pt-BR.json files in the src/assets/i18n folder.
6. Add the content below in the de-DE.json file.
7. Add the content below in the en-US.json file.
8. Add the content below in the es-ES.json file.
9. Add the content below in the fr-FR.json file.
10. Add the content below in the pt-BR.json file.
11. Remove the contents of the AppComponent class from the src/app/app.component.ts file. Import the TranslateService service and create the changeLanguage method as below.
12. Remove the contents of the src/app/app.component.html file. Add the buttons as below.
13. Run the application with the command below.
14. Ready! Access the URL http://localhost:4200/ and check if the application is working. See the application working on GitHub Pages and Stackblitz.
The application repository is available at https://github.com/rodrigokamada/angular-internationalization.
This tutorial was posted on my blog in portuguese.
