For more information, please visit:

Guidelines for Translating Angular 6 Applications Using ngx-translate:

Here are the steps we will be taking:

• Create a minimal Angular 6 project
• Install and load ngx-translate
• Initialize the TranslateService
• Create .json translation files
• Translate simple title and intro
• Integrate language switcher
• Translate sentences with variables

Utilizing Nested .json Objects

Create a Minimal Angular 6 Project:

To start, use @angular/cli to create a new project named "traduction" in the terminal:

ng new traduction --prefix tr
cd traduction
ng serve -o

---

Installing and Loading ngx-translate:

In your project folder "traduction", use npm in the terminal:

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

Note: Use the following versions for angular 6 and below:

"@ngx-translate/core": "^9.1.1" 
"@ngx-translate/http-loader": "^3.0.1"

For Angular 5, use the latest version 10 and above

Importing Necessary Modules into app.module.ts :

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

Add a function that returns a "TranslateHttpLoader" and export it as needed by AoT. This function loads translations using Http and .json:

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

OR

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

Next, import the modules into the @NgModule which tells Angular to load this Module into your AppModule:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Injecting the TranslateService:

In "app.component.ts", initialize the "TranslateService" by importing it:

import { TranslateService } from '@ngx-translate/core';

Within the AppComponent Class, inject the service, define the default language, and add a function to switch languages:

constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
}

switchLanguage(language: string) {
    this.translate.use(language);
}

Creating .json Translation Files:

Create translation files inside the assets/i18n folder:

src/assets/i18n/en.json

{
    "Title": "Translation example",
    "Intro": "Hello I am Arthur, I am 42 years old."
}

src/assets/i18n/fr.json

{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle Arthur, j'ai 42 ans."
}

These .json files will be loaded by the "TranslateHttpLoader" created in "app.module.ts".

Translating Simple Title and Intro:

In app.component.html, use the translate directive within the h1 tag to translate text. Also, use the TranslationPipe to translate labels with inline strings:

<h1 translate>Title</h1>

<div>
{{ 'Intro' | translate:user }}
</div>

Integrating Language Switcher:

Attach the language switcher function to buttons in app.component.ts and call the switchLanguage() function with the corresponding language key:

<button (click)="switchLanguage('en')">en</button>

<button (click)="switchLanguage('fr')">fr</button>

Translating Sentences with Variables:

To handle sentences containing variables, pass an object into the "translate" pipe and use its properties in the translation:

...
export class AppComponent {
  user = {
    name: 'Arthur',
    age: 42
};
...

Now you can use these properties in your translations:

src/assets/i18n/en.json

{
    "Title": "Translation example",
    "Intro": "Hello I am {{name}}, I am {{age}} years old."
}

src/assets/i18n/fr.json

{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans."
}

Using Nested .json Objects:

If you want more control over your translations, consider using nested .json objects to translate page blocks or components. Here's an example of how to structure the .json files:

{
    "Title": "Translation example",
    "Intro": "Hello I am {{name}}, I am {{age}} years old.",
    "Startpage": {
        "TranslationSections": "Hello World"
    },
     "Aboutpage": {
        "TranslationSections": "We are letsboot"
    }
}


{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
    "Startpage": {
        "TranslationSections": "Bonjour Monde"
    },
    "Aboutpage": {
        "TranslationSections": "Nous sommes letsboot"
    }
}

Template Usage:

<h1 translate>Title</h1>

<div>
{{ 'Intro' | translate:user }}
</div>

<div>
{{ 'Startpage.TranslationSections' | translate }}
</div>

<div>
{{ 'Aboutpage.TranslationSections' | translate }}
</div>

<br/>

<button (click)="switchLanguage('en')">en</button>
<button (click)="switchLanguage('fr')">fr</button>