Internacionalización de una aplicación angular con ngx-translate

//Internacionalización de una aplicación angular con ngx-translate

Internacionalización de una aplicación angular con ngx-translate

Cuando se desarrollan aplicaciones con soporte para varios idiomas, es fácil que la traducción de los contenidos suponga un reto para los desarrolladores, para resolver y facilitar esta tarea usaremos la librería ngx-translate.

ngx-translate es una librería que permite la carga dinámica de archivos de traducciones en nuestras aplicaciones angular, esta capacidad de carga dinámica de archivos nos permite cambiar el idioma de la aplicación sin necesidad de recargar la pantalla.

Paso 1:  Creación de una aplicación angular.

Para empezar, crearemos un nuevo proyecto de angular usando angular cli, para lo cual desde nuestra terminal ejecutaremos:

>> ng new “my-app”

Este comando nos creara una nueva aplicación angular

Paso 2: Instalar ngx-translate.

Para descargar el módulo de traducciones y el cargador de traducciones de ngx-translate, desde nuestra terminal ejecutamos los comandos:

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

Paso 3:  Crear archivos de idiomas.

Después de instalar los módulos de traducción crearemos los archivos con las traducciones, dentro de la carpeta assets crearemos una carpeta i18n, que contendrá los archivos con las traducciones.

Crearemos dos archivos JSON dentro de la carpeta, en.json y es.json, con las correspondientes traducciones de cada uno de los idiomas.

// en.json
 
{
    "home": {
        "title": "Internationalization of an angular application",
        "englishLabel": "English",
        "spanishLabel": "Spanish"
    }
}
// es.json
 
{
    "home": {
        "title": "Internacionalización de una aplicación angular",
        "englishLabel": "Ingles",
        "spanishLabel": "Español"
    }
}

Paso 4: Configuración de ngx-translate.

Lo siguiente es configurar el servicio de traducciones para lo cual importaremos los módulos de traducción dentro del app.module.ts, necesitamos importar también el módulo y el cliente http, para el correcto funcionamiento del servicio de traducciones que vamos a usar.

Crearemos también dentro del archivo app.modulo.ts una factoría para cargar los archivos de traducciones:

// app.module.ts
 
import { HttpClientModule, HttpClient } from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 
}

Esta factoría se encargará de cargar en la aplicación los distintos ficheros de idiomas de la carpeta i18n dependiendo del idioma seleccionado en cada momento, por ejemplo, si el idioma seleccionado es inglés (en), la factoría cargara el fichero assets/i18n/en.json.

Para acabar la configuración de la aplicación, añadimos al import del app.module.ts la configuración de carga del servicio de traducciones.

imports: [
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: createTranslateLoader,
            deps: [HttpClient]
        }
    })
  ],

Paso 5:  Utilización de las traducciones.

Lo siguiente es usar nuestras traducciones en un componente, para ello modificaremos el fichero app.component.ts.

Lo primero será cambiar el comportamiento del componente, para lo cual añadimos una variable selectedLanguage inicializada a español (es) para que guarde el idioma seleccionado.

Dentro del constructor del componente inyectamos el servicio de traducciones que nos permitirá cambiar el lenguaje seleccionado, además estableceremos el idioma por defecto mediante la función setDefaultLang() seleccionamos el idioma por defecto y el idioma actual con use().

Por último, creamos una función para cambiar el idioma toogleLanguage ().

selectedLanguage = 'es';
 
    constructor(private translateService: TranslateService) {
        this.translateService.setDefaultLang(this.selectedLanguage);
        this.translateService.use(this.selectedLanguage);
    }
 
    toogleLanguage(lang: string) {
        this.translateService.use(lang);
    }

Lo siguiente es crear una template que consistirá en un título y un selector para cambiar el idioma, para traducir los textos usamos la pipe translate a la que se le pasa como parámetro la referencia a la traducción de los archivos json, en el caso del título ‘home.title’.

  template: `
<div style="text-align:center">
            <h1 (click)="toogleLanguage()">
                {{ 'home.title' | translate }}
            </h1>
            <select
                [ngModel]="selectedLanguage"
                (ngModelChange)="toogleLanguage($event)">
                <option value="es">
                    {{ 'home.spanishLabel' | translate }}
                </option>
                <option value="en">
                    {{ 'home.englishLabel' | translate }}
                </option>
            </select>
        </div>

`,

El selector permitirá el cambio de idioma cuando el valor seleccionado cambie, para ello ejecutará la función toogleLanguage.

Quedando el archivo app.component.ts

// app.component.ts

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

@Component({
    selector: 'app-root',
    template: `
        <div style="text-align:center">
            <h1 (click)="toogleLanguage()">
                {{ 'home.title' | translate }}
            </h1>
            <select
                [ngModel]="selectedLanguage"
                (ngModelChange)="toogleLanguage($event)">
                <option value="es">
                    {{ 'home.spanishLabel' | translate }}
                </option>
                <option value="en">
                    {{ 'home.englishLabel' | translate }}
                </option>
            </select>
        </div>    `,
    styleUrls: ['./app.component.css']
})

export class AppComponent {

    selectedLanguage = 'es';

    constructor(private translateService: TranslateService) {
        this.translateService.setDefaultLang(this.selectedLanguage);
        this.translateService.use(this.selectedLanguage);
    }

    toogleLanguage(lang: string) {
        this.translateService.use(lang);
    }
}

Para probar la aplicación lanzamos

>> npm start

Y abrimos nuestro navegador en localhost:4200

Si cambiamos el idioma seleccionado

Haciendo uso de la librería de internacionalización ngx-translate hemos conseguido una aplicación angular con soporte para múltiples idiomas en unos pocos pasos.

 
2019-02-13T12:46:40+00:0013 febrero, 2019|Categories: Bravent|Tags: , , , , |0 Comments