Traduire les pages web dans Angular avec ngx-translate

Traduire les pages Web dans Angular peut se faire assez facilement grâce à un package npm “ngx-translate” qui permet d’internationaliser votre application Web. En d’autres termes, vous pouvez traduire les textes affichés sur vos pages grâce à de simple fichier JSON contenant les traductions dans différentes langues. Grâce à ce package, vous pourrez effectuer les traductions directement dans vos template html ou même directement dans votre code. De plus, vous pourrez facilement passer d’une langue à l’autre sans devoir rafraichir toutes votre application.

1. Installation de ngx-translate

La première étape constate à installer ngx-translate dans votre projet. On va donc déjà partir d’un projet hello-world comme à l’habitude. Une fois votre projet créé avec la commande “ng new hello-world”, vous pourrez l’ouvrir et enfin installer les 2 packages nécessaires via les commandes npm suivantes :

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

Le premier package correspond à la partie principale de ngx-translate (la partie CORE).

Le second package correspond à l’http-loader qui permet de charger les traductions depuis des fichiers json.

2. Créer les fichiers de traduction

Créons à présent nos fichiers de traduction. Imaginons que notre site ait un titre et un libellé permettant de choisir la langue via une liste déroulante. On aura donc les libellés représentés par les “variables” : “title” et “language”.

Rendez-vous dans le dossier src\assets\i18n (à créer) pour y ajouter les fichiers suivants :

• Pour l’anglais : en.json

{
    "HomePage": {
        "Title" : "The title of my web application.",
        "Language" : "You can choose your language here :"
    }
}

• Pur le français : fr.json

{
    "HomePage": {
        "Title" : "Le titre de votre application Web.",
        "Language" : "Vous pouvez choisir votre langue ici :"
    }
}

3. Initialiser le module de traductions

Pour pouvoir utiliser les traductions et ainsi traduire nos pages web dans Angular, il va falloir initialiser le module de traduction qui n’est rien d’autre qu’un service (nous verrons les services et l’injection de dépendance dans d’autres tuto).

On va donc modifier notre module principal : src\app\app.module.ts comme suit :

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

@NgModule({
  ...
  imports: [
    ...
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      },
      defaultLanguage: 'en'
    })
...
export class AppModule { }
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

On a donc modifié plusieurs choses :

• On a ajouté des imports en tête de fichier pour pouvoir utiliser plusieurs classes
• On a modifié les imports du module (@NgModule) pour y ajouter :
  • Le HttpClientModule qui va permettre d’injecter des HttpClient pour notre module de traduction.
  • Le TranslateModule.forRoot qui permet d’initialiser le module de traduction.
  • Dans ce “forRoot”, on y indique le loader, la manière dont on va charger les traductions
    • La propriété “provide” indique qu’on utilise le TranslateLoader de base pour charger les traductions
    • La propriété “useFactory” indique qu’on va coder une fonction plus bas qui va initialiser une classe permettant de charger les traductions depuis un certain endroit
    • La propriété “deps” permet de savoir ce qui sera utilisé pour charger nos traductions dans notre cas, c’est un HttpClient (injecté dans notre fonction plus bas grâce au HttpClientModule)
  • On y indique également la langue par défaut du site, la langue = le fichier json”.json” donc ici on peut mettre “en” pour charger le fichier par défaut “en.json”.
• Enfin on va également coder la création de notre TranslateHttpLoader qui va utiliser l’HttpClient et indiquer que les fichiers sont des fichiers “.json” situés dans “./assets/i18n”.

4. Traductions dans les templates Html

Pour effectuer les traductions dans le template html, rien de plus simple : on utilise le pipe “translate”. Voici un exemple dans app.component.html :

<div>
  <p>{{ 'HomePage.Title' | translate }}</p>
  <p>{{ 'HomePage.Language | translate' }} <select>
    <option id="en">English</option>
    <option id="fr">Français</option>
  </select>
  </p>
</div>

5. Traductions directement dans le code

Pour traduire par exemple le titre directement dans le code TS on pourrait faire simplement ceci dans notre 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.css']
})
export class AppComponent {
  title = 'test-ngx-translate';

  constructor(private translate: TranslateService) {
    translate.get('HomePage.Title').subscribe(val => this.title = val);
  }
}

On importe donc TranslateService pour pouvoir l’utiliser directement dans notre constructeur. En fait c’est Angular qui va le passer tout seul à notre constructeur par ce qu’on appelle l’injection de dépendance. C’est le principe utilisé pour les services et comme je vous ai dit, ngx-translate est un service de traduction.

Une fois qu’on a notre objet “translate”, il suffit d’appeler le “get” pour lui dire de récupérer la traduction “HomePage.Title” et dans le “subscribe”, on peut lui dire que la valeur “val” récupérée est à assigner à “this.title”.

Ainsi, dans notre propriété “title” de notre composant, on a assigné la traduction du titre qui se trouve dans le fichier json correspondant à la langue en cours.

6. Changer la langue à la volée

Changer la langue à la volée se fait à l’aide d’une simple ligne de code :

translat.use('en');

Ainsi, si on veut utiliser notre liste déroulante pour changer la langue par défaut, il suffit de stocker l’objet “translate” récupéré dans le constructeur et ensuite de l’utiliser dans une méthode qui serait appelée quand on change la valeur choisie dans cette fameuse liste déroulante.

Côté app.component.ts on va donc faire ceci :

export class AppComponent {
  trans: TranslateService;

  constructor(private translate: TranslateService) {
    this.trans = translate;
  }

  onLanguageChange(event: any) {
    this.trans.use(event.target.value);
    console.log(event.target.value);
  }
}

On voit donc qu’on stoque translate dans this.trans pour pouvoir l’utiliser après.

Et on a ajouté une nouvelle méthode onLanguageChange qui pourra réceptionner l’évènement CHANGE depuis notre liste déroulante (template HTML) et qui va changer la langue de la page.

Côté template HTML on va modifier notre fichier app.component.html pour obtenir ceci :

<div>
  <p>{{ 'HomePage.Title' | translate }}</p>
  <p>{{ 'HomePage.Language' | translate }} 
    <select (change)="onLanguageChange($event)">
      <option value="en">English</option>
      <option value="fr">Français</option>
    </select>
  </p>
</div>

On peut voir ainsi qu’on a ajouté le (change)=”onLanguageChange($event)” qui permet de s’accrocher à l’évènement change -> pour plus d’info sur le binding d’évènements, je vois renvoi vers l’article sur le binding ci-dessous :

Le binding dans Angular

Cet évènement va donc déclencher l’appel à la méthode onLanguageChange qu’on a codé côté code TS. Ainsi, on a une page qui se retraduit toute seule sans devoir rafraichir quoi que ce soit.

7. Utiliser les paramètres dans les traductions

Imaginons le message “Bonjour cher {nom}, comment allez-vous ?”.

Voici ce que ça donne dans en.json :

{
    "HomePage": {
        "Title" : "The title of my web application.",
        "Language" : "You can choose your language here :",
        "Welcome" : "Welcome dear {{name}}. How are you ?"
    }
}

Voici ce que ça donne dans fr.json :

{
    "HomePage": {
        "Title" : "Le titre de votre application Web.",
        "Language" : "Vous pouvez choisir votre langue ici :",
        "Welcome" : "Bienvenue cher {{name}}. Comment allez-vous ?"
    }
}

Côté template html, il suffit de faire ceci pour utiliser le paramètre :

<p>{{ 'HomePage.Welcome' | translate: {'name': 'Dupont Albert'} }}</p>

Après le pipe “translate”, on passe en paramètre ‘name’ et en valeur un nom quelconque. Ici “Dupont Albert”.

Si on avait le nom comme une variable “name” dans app.component.ts, à ce moment-là, notre template html ressemblerait plutôt à ceci :

<p>{{ 'HomePage.Welcome' | translate: {'name': name} }}</p>

8. En résumé

Voilà, vous avez de bonnes bases pour pouvoir utiliser ngx-translate. Vous voyez qu’il n’y a rien de compliqué. L’installation se fait avec :

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

L’initialisation du module de traduction se fait dans le @NgModule du module principal comme expliqué dans le point 3.

Les traductions dans le template html se font avec le pipe “translate” comme par exemple ici :

{{ 'HomePage.Title' | translate }}

Les traductions dans le code directement se font en utilisant l’objet translate récupéré depuis le constructeur de notre composant (fichier TS) :

translate.get('HomePage.Title').subscribe(val => this.title = val);

Le changement de langue à la volée se fait quant à lui via la méthode use comme suit :

this.trans.use('en');

Voilà un petit résumé pour les plus pressés d’entre vous. Et pour ceux qui veulent aller plus loin, rendez-vous sur la page web de ngx-translate.

J’espère que cet article vous aura plu. N’hésitez pas à commenter, partager et vous abonner pour ne rien manquer. Je vous dis à très bientôt pour de nouveaux tutos gratuits sur developpement-web-facile.com.