Ejemplo multidioma en Angular 2+

Hola a todos, hoy os voy a explicar como funciona el tema del multi idioma en Angular 2.

En cualquier app, es recomendable dejarlo preparado para una futura expansión, lo que viene siendo una aplicación multi idioma.

Lo primero, lo que vamos a hacer es crearnos en la carpeta de assets y crear tantos ficheros como idiomas queramos, pero ojo, no vale con cualquier nombre, debe ser algo parecido a esto: es-ES, en-US, etc. Es lo que viene siendo codigo ISO, te dejo un enlace para consultarlos: http://www.lingoes.net/en/translator/langcode.htm

Una recomendación que os hago, es guardar estas traducciones en una carpeta, en mi caso será translations.

Veamos un ejemplo de como crear estos ficheros:

• es-ES.json

{
  "label.title": "Titulacion",
  "label.content": "Contenido"
}

• en-US.json

{
  "label.title": "Title",
  "label.content": "Content"
}

Es importante que la propiedad sea la misma en todos los ficheros.

Ahora vamos a crearnos nuestro servicio, que se va a encargar de recuperar las traducciones y de traducir:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TranslateService {

  // Guardo las traducciones en un objeto
  private _data: any;

  // Inyecto el servicio HttpClient
  constructor(
    private http: HttpClient
  ) { }

  /**
   * Obtengo las traducciones, depende del lenguaje del navegador
   * navigator.language => devuelve el idioma del navegador
   */
  public getData() {
    return new Promise((resolve, reject) => {
      this.http.get('assets/translations/' + navigator.language + '.json')
        .subscribe(data => {
          // Guardo los datos
          this._data = data;
          resolve(true);
        }, error => {
          console.log('Error al recuperar las traducciones: ' , error);
          reject(true);
        });
    })

  }

  /**
   * Obtengo una traduccion en concreto
   */
  public getTranslate(phrase: string) {
    return this._data[phrase];
  }

}

Fijaros que uso navigator.language para que me devuelva el código del lenguaje.

Lo ideal es que con este getData lo carguemos de inicio, os dejo el manual donde lo vemos, de todas formas lo tenemos en el ejemplo al final.

Cargar datos inicialmente de un fichero JSON en Angular 2+

También nos vamos a crear un Pipe que sera en el utilicemos en el HTML:

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '../services/translate.service';

@Pipe({
  name: 'translate'
})
export class TranslatePipe implements PipeTransform {

  // Inyecto el servicio translate
  constructor(
    private translate: TranslateService
  ){

  }

  transform(value: any): any {
    return this.translate.getTranslate(value) ? this.translate.getTranslate(value) : '';
  }

}

Veamos como usarlo en el HTML usando el pipe que hemos creado.

<h1>{{'label.title' | translate}}</h1>


<h2>{{'label.content' | translate}}</h2>

Veamos como lo podemos usar en un .ts.

import { Component } from '@angular/core';
import { TranslateService } from './services/translate.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(
    private translateService: TranslateService
  ){
    console.log(this.translateService.getTranslate("label.title"));
    console.log(this.translateService.getTranslate("label.content"));

  }

}

Os dejo un ejemplo en stackblitz para que veáis el ejemplo completo en vivo.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.