Setting up i18n in Angular 17 for Multi-Language Support

Think of your web app as a tool that can connect with users worldwide. To ensure a welcoming and user-friendly experience for everyone, we need to speak their language. Internationalization (i18n) is the process of making your app adaptable to multiple languages and regions. Angular provides powerful tools and features to help you achieve this.

Project Preview

What is Internalization or i18n in Angular Application?

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.

What is 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.

Prerequisites

• Angular
• HTML, CSS, JavaScript
• NPM

Approach

• For Setup of i18n, We will create an Angular Project without standalone Component.
• We will create a folder named as 'i18n' in assets folder under src directory.
• JSON data of different languages will be added in their respective files.

Steps implement i18n in Angular Application

Step 1: Setting Up a New Angular Project

We’ll require the Angular CLI, so be sure to install it by running:

npm install -g @angular/cli

Before we begin our i18n journey, let’s create a new Angular project with the route file and the SCSS style format:

ng new angular-internationalization --no-standalone

Step 2: Install and configure the Bootstrap CSS framework

We need to install the bootstrap and bootstrap-icons libraries:

npm install bootstrap bootstrap-icons

Step 3: Configure the bootstrap and bootstrap-icons libraries.

Change the `angular.json`file and add the `bootstrap.scss`, `bootstrap-icons.css` and `bootstrap.bundle.min.js` files as below:

"styles": [
    "node_modules/bootstrap/scss/bootstrap.scss",
    "node_modules/bootstrap-icons/font/bootstrap-icons.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Step 4: Install the @ngx-translate/core and @ngx-translate/http-loader libraries.

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

Step 5: Import the HttpClient, HttpClientModule, TranslateModule, TranslateLoader and TranslateHttpLoader modules in app.module.ts.

Step 6: 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.

Step 7: Remove the contents of the AppComponent class from the src/app/app.component.ts file. Import the `TranslateService` service and create the `changeLanguage` method.

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
}

Example: Below is an example of setup of i18n for Multi-Language Support in which we will be making an i18n folder having different data in JSON format.

//src/app/app.component.html

<div class="container-fluid py-3">
    <h1>Angular Internationalization (i18n)</h1>

    <div class="btn-group btn-group-sm py-5">
        <button type="button" class="btn btn-sm btn-outline-secondary"
                (click)="changeLanguage('de-DE')"
            [class.active]="translateService.currentLang === 'de-DE'">
          Deutschland</button>
        <button type="button" class="btn btn-sm btn-outline-secondary"
                (click)="changeLanguage('en-US')"
            [class.active]="!translateService.currentLang || 
                            translateService.currentLang === 'en-US'">English</button>
        <button type="button" class="btn btn-sm btn-outline-secondary" 
                (click)="changeLanguage('es-ES')"
            [class.active]="translateService.currentLang === 'es-ES'">Español
      </button>
        <button type="button" class="btn btn-sm btn-outline-secondary" 
                (click)="changeLanguage('fr-FR')"
            [class.active]="translateService.currentLang === 'fr-FR'">
          Francés</button>
        <button type="button" class="btn btn-sm btn-outline-secondary" 
                (click)="changeLanguage('pt-BR')"
            [class.active]="translateService.currentLang === 'pt-BR'">
          Português</button>
    </div>

    <h3>{{ "hello" | translate: { name: "Angular" } }}</h3>
</div>

//src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient],
            },
            defaultLanguage: 'en-US',
        }),
        AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

//src/app/assets/i18n/de-DE.json
{
  "hello": "Hallo, {{name}}!"
}

//src/app/assets/i18n/en-US.json
{
  "hello": "Hello, {{name}}!"
}

//src/app/assets/i18n/es-ES.json
{
  "hello": "Hola, {{name}}!"
}

//src/app/assets/i18n/fr-FR.json
{
  "hello": "Bonjour, {{name}}!"
}

//src/app/assets/i18n/pt-BR.json
{
  "hello": "Olá, {{name}}!"
}

//src/app/app.component.ts
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor(public translateService: TranslateService) {
    }

    public changeLanguage(language: string): void {
        this.translateService.use(language);
    }
}

Step 8: Run the application

ng serve

Output: