[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í:

	import { BrowserModule } from '@angular/platform-browser';
	import {HttpClient, HttpClientModule} from '@angular/common/http';
	import { NgModule } from '@angular/core';
	import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
	import {TranslateHttpLoader} from '@ngx-translate/http-loader';
	import { AppComponent } from './app.component';
	export function HttpLoaderFactory(http: HttpClient) {
	return new TranslateHttpLoader(http);
	}
	@NgModule({
	declarations: [
	AppComponent
	],
	imports: [
	BrowserModule,
	HttpClientModule,
	TranslateModule.forRoot({
	loader: {
	provide: TranslateLoader,
	useFactory: HttpLoaderFactory,
	deps: [HttpClient]
	}
	})
	],
	providers: [],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

view raw app.module.ts hosted with ❤ by GitHub

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

	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 {
	constructor(private translateService: TranslateService) {
	const browserLanguage = translateService.getBrowserLang();
	translateService.setDefaultLang('en');
	translateService.use(browserLanguage);
	}
	switchLanguage(language: string) {
	this.translateService.use(language);
	}
	}

view raw app.component.ts hosted with ❤ by GitHub

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:

	{
	"demo":
	{
	"by": "By Lizzy Mendivil",
	"english": "English",
	"forgot_password": "Forgot password?",
	"not_member": "Not a member?",
	"password": "Password",
	"remember": "Remember me",
	"signin": "Sign in",
	"signin_with": "Or sign in with",
	"signup": "Sign up now",
	"spanish": "Spanish",
	"title": "Internationalize your App!",
	"username": "Username",
	"welcome": "Welcome!"
	}
	}

view raw en.json hosted with ❤ by GitHub

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í:

	<div class="mr-5 mb-5 d-flex justify-content-end">
	<button class="mr-2 btn bg-danger text-white text-uppercase" (click)="switchLanguage('en')">{{ 'demo.english' | translate
	}}</button>
	<button class="btn bg-danger text-white text-uppercase" (click)="switchLanguage('es')">{{ 'demo.spanish' | translate }}</button>
	</div>

view raw app.component.html hosted with ❤ by GitHub

Y voilà! Eso es todo.

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