Wednesday, February 13, 2019

[i18n] Implementar ngx-translate en un proyecto Angular 7

Hola! Hoy te presento una forma de implementar i18n en tu proyecto Angular y esta forma es utilizando la libreria de terceros llamada *ngx-translate*

Es muy sencillo, te los mostraré en 5 pasos y asumiré que ya tienes creado tu proyecto Angular:

PASO 1: Instalar la librería en tu proyecto:


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


PASO 2: Importar ngx-translate en app.module.ts
Tu app.module.ts quedaría así:

PASO 3: Inyectar TranslateService en app.component.ts
Tu app.component.ts quedaría así


Nota que le agregué una función que hace el switch de idioma. Podrías Llamar a esta función desde un botoncito o desde otro control.

PASO 4: Crear los archivos JSON por cada idioma.
Recomendación: podrías ubicar estos archivos en la siguiente ruta: assets/i18n/en.json

Un ejemplo:


PASO 5: Editar los templates (HTML) y agregar los translate
Y como último paso, usamos los translations y tenemos dos alternativas: usando pipes o directivas. Me gusta más los pipes. Quedaría así:


Y voilà! Eso es todo.

Hay algunas herramientas que podrían serte de ayuda en el sitio oficial: ngx-translate.com