feat(i18n): added internationalization ng2 translate plugin

Author: Ismaestro

package.json

@@ -26,6 +26,7 @@
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "json-server": "^0.9.4",
+    "ng2-translate": "^5.0.0",
     "rxjs": "^5.0.1",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.7.2"

src/app/app.component.html

@@ -1,9 +1,9 @@
 <div class="container">
-    <toh-nav [title]="'Tour of heroes'"></toh-nav>
+    <toh-nav [title]="'tourOfHeroes' | translate"></toh-nav>
     <router-outlet></router-outlet>
 </div>
 <footer class="footer">
     <div class="container">
-        <span class="text-muted">Tour of heroes @2016.</span>
+        <span class="text-muted">{{ 'tourOfHeroes' | translate }} @2016.</span>
     </div>
 </footer>

src/app/app.component.ts

@@ -1,17 +1,17 @@
-import {Component, Inject} from '@angular/core';
-
-import {APP_CONFIG} from './config/app.config';
-import {IAppConfig} from './config/iapp.config';
+import {Component} from '@angular/core';
+import {TranslateService}  from 'ng2-translate';
 
 @Component({
   selector: 'toh-app',
   templateUrl: './app.component.html'
 })
 
 export class AppComponent {
-  title: string;
+  private translateService: TranslateService;
 
-  constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig) {
-    this.title = this.appConfig.title;
+  constructor(translateService: TranslateService) {
+    this.translateService = translateService;
+    this.translateService.setDefaultLang('en');
+    this.translateService.use('en');
   }
 }

src/app/app.module.ts

@@ -1,7 +1,9 @@
-import {NgModule}      from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
-import {FormsModule}   from '@angular/forms';
-import {HttpModule}    from '@angular/http';
+import {NgModule}                         from '@angular/core';
+import {BrowserModule}                    from '@angular/platform-browser';
+import {FormsModule}                      from '@angular/forms';
+import {Http, HttpModule}                 from '@angular/http';
+import {TranslateModule, TranslateLoader} from 'ng2-translate';
+import {TranslateLoaderFactory}           from './app.translate.factory';
 
 import {APP_CONFIG, AppConfig} from './config/app.config';
 
@@ -18,6 +20,11 @@ import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
     BrowserModule,
     FormsModule,
     HttpModule,
+    TranslateModule.forRoot({
+      provide: TranslateLoader,
+      useFactory: TranslateLoaderFactory,
+      deps: [Http]
+    }),
     AppRoutingModule,
     CoreModule,
     HeroesModule,

src/app/app.translate.factory.ts

@@ -0,0 +1,5 @@
+import {TranslateStaticLoader} from 'ng2-translate';
+
+export function TranslateLoaderFactory(http: any) {
+  return new TranslateStaticLoader(http, '/assets/i18n', '.json');
+}

src/app/config/app.config.ts

@@ -6,7 +6,6 @@ export let APP_CONFIG = new OpaqueToken('app.config');
 
 let heroesRoute = 'heroes';
 export const AppConfig: IAppConfig = {
-  title: 'Tour of Heroes',
   routes: {
     heroes: heroesRoute,
     heroById: heroesRoute + '/:id'

src/app/config/iapp.config.ts

@@ -1,5 +1,4 @@
 export interface IAppConfig {
   routes: any;
   endpoints: any;
-  title: string;
 }

src/app/core/core.module.ts

@@ -1,6 +1,9 @@
-import {NgModule, Optional, SkipSelf} from '@angular/core';
-import {CommonModule}                 from '@angular/common';
-import {FormsModule}                  from '@angular/forms';
+import {NgModule, Optional, SkipSelf}     from '@angular/core';
+import {CommonModule}                     from '@angular/common';
+import {FormsModule}                      from '@angular/forms';
+import {Http}                             from '@angular/http';
+import {TranslateModule, TranslateLoader} from 'ng2-translate';
+import {TranslateLoaderFactory}           from '../app.translate.factory';
 
 import {throwIfAlreadyLoaded} from './module-import-guard';
 import {LoggerService}        from './logger.service';
@@ -10,12 +13,18 @@ import {HeroRoutingModule} from '../heroes/heroes-routing.module';
 
 import {NavComponent} from './nav/nav.component';
 
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     HeroRoutingModule,
-    HeroesModule
+    HeroesModule,
+    TranslateModule.forRoot({
+      provide: TranslateLoader,
+      useFactory: TranslateLoaderFactory,
+      deps: [Http]
+    }),
   ],
   exports: [
     NavComponent

src/app/core/nav/nav.component.html

@@ -9,6 +9,16 @@
                 </li>
             </ul>
         </div>
+        <div class="dropdown">
+            <a class="btn btn-secondary dropdown-toggle" id="dropdownMenuLink" data-toggle="dropdown"
+               aria-haspopup="true" aria-expanded="false">
+                <i class="fa fa-globe" aria-hidden="true"></i> {{ 'language' | translate }}
+            </a>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                <a class="dropdown-item" (click)="changeLanguage('en')">{{ 'english' | translate }}</a>
+                <a class="dropdown-item" (click)="changeLanguage('es')">{{ 'spanish' | translate }}</a>
+            </div>
+        </div>
         <toh-hero-search></toh-hero-search>
     </nav>
 </header>

src/app/core/nav/nav.component.ts

@@ -1,4 +1,5 @@
 import {Component, Inject, Input} from '@angular/core';
+import {TranslateService}         from 'ng2-translate';
 
 import {APP_CONFIG} from '../../config/app.config';
 import {IAppConfig} from '../../config/iapp.config';
@@ -14,10 +15,25 @@ export class NavComponent {
 
   menuItems: any[];
 
-  constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig) {
-    this.menuItems = [
-      {link: '/', name: 'Home'},
-      {link: '/' + appConfig.routes.heroes, name: 'Heroes list'}
-    ];
+  private translateService: TranslateService;
+
+  private loadMenus(): void {
+    this.translateService.get(['home', 'heroesList'], {}).subscribe((texts: string) => {
+      this.menuItems = [
+        {link: '/', name: texts['home']},
+        {link: '/' + this.appConfig.routes.heroes, name: texts['heroesList']}
+      ];
+    });
+  }
+
+  constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig,
+              translateService: TranslateService) {
+    this.translateService = translateService;
+    this.loadMenus();
+  }
+
+  changeLanguage(language: string): void {
+    this.translateService.use(language);
+    this.loadMenus();
   }
 }