Implemented the Localization using ngx-translate Module

package.json

@@ -19,6 +19,8 @@
     "@angularclass/hmr": "1.2.2",
     "@angularclass/hmr-loader": "3.0.2",
     "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.22",
+    "@ngx-translate/core": "6.0.1",
+    "@ngx-translate/http-loader": "0.0.3",
     "amcharts3": "github:amcharts/amcharts3",
     "ammap3": "github:amcharts/ammap3",
     "animate.css": "3.5.2",

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
 import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
 
 /*
  * Platform and Environment providers/directives/pipes
@@ -59,7 +60,8 @@ export type StoreType = {
 
 export class AppModule {
 
-  constructor(public appRef: ApplicationRef, public appState: AppState) {
+  constructor(public appRef: ApplicationRef,
+              public appState: AppState) {
   }
 
   hmrOnInit(store: StoreType) {

src/app/app.translation.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { Http, HttpModule } from '@angular/http';
+
+import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
+import { TranslateHttpLoader } from "@ngx-translate/http-loader";
+import { TranslateService } from '@ngx-translate/core';
+
+export function createTranslateLoader(http: Http) {
+    return new TranslateHttpLoader(http, './assets/i18n/US/', '.json');
+}
+
+const translationOptions = {
+  loader: {
+    provide: TranslateLoader,
+    useFactory: (createTranslateLoader),
+    deps: [Http]
+  }
+};
+
+@NgModule({
+  imports: [TranslateModule.forRoot(translationOptions)],
+  exports: [TranslateModule],
+  providers: [TranslateService]
+})
+export class AppTranslationModule {
+  constructor(private translate: TranslateService) {
+    translate.addLangs(["en"]);
+    translate.setDefaultLang('en');
+    translate.use('en');
+  }
+}

src/app/pages/dashboard/dashboard.html

@@ -6,12 +6,12 @@
 
 <div class="row">
   <ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-xs-12"
-                     title="Acquisition Channels" baCardClass="traffic-panel medium-card">
+                     title="general.dashboard.acquisitionChannels" baCardClass="traffic-panel medium-card">
     <traffic-chart></traffic-chart>
   </ba-card>
 
   <ba-card class="col-xlg-6 col-xl-6 col-lg-12 col-sm-12 col-xs-12"
-           title="Users by Country" baCardClass="medium-card">
+           title="general.dashboard.usersByCountry" baCardClass="medium-card">
     <users-map></users-map>
   </ba-card>
 </div>
@@ -20,7 +20,7 @@
   <div class="col-xlg-9 col-xl-6 col-lg-6  col-md-12 col-sm-12 col-xs-12">
     <div class="row">
       <ba-card class="col-xlg-8 col-xl-12 col-lg-12 col-md-7 col-sm-12 col-xs-12"
-               title="Revenue" baCardClass="medium-card">
+               title="general.dashboard.revenue" baCardClass="medium-card">
         <line-chart></line-chart>
       </ba-card>
       <ba-card class="col-xlg-4 col-xl-12 col-lg-12 col-md-5 col-sm-12 col-xs-12"
@@ -31,7 +31,7 @@
   </div>
 
   <div class="col-xlg-3 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12">
-    <ba-card title="Feed"
+    <ba-card title="general.dashboard.feed"
              baCardClass="large-card with-scroll feed-panel">
       <feed></feed>
     </ba-card>
@@ -40,13 +40,12 @@
 </div>
 
 <div class="row shift-up">
-  <ba-card class="col-xlg-3 col-lg-6 col-md-12 col-sm-12 col-xs-12" title="To Do List"
+  <ba-card class="col-xlg-3 col-lg-6 col-md-12 col-sm-12 col-xs-12" title="general.dashboard.toDoList"
            baCardClass="xmedium-card feed-comply-panel with-scroll todo-panel">
     <todo></todo>
   </ba-card>
-  <ba-card class="col-xlg-6 col-lg-6 col-md-12 col-sm-12 col-xs-12" title="Calendar"
+  <ba-card class="col-xlg-6 col-lg-6 col-md-12 col-sm-12 col-xs-12" title="general.dashboard.calendar"
            baCardClass="xmedium-card feed-comply-panel with-scroll calendar-panel">
     <calendar></calendar>
   </ba-card>
 </div>
-

src/app/pages/dashboard/dashboard.module.ts

@@ -1,6 +1,7 @@
 import { NgModule }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { AppTranslationModule } from '../../app.translation.module';
 import { NgaModule } from '../../theme/nga.module';
 
 import { Dashboard } from './dashboard.component';
@@ -26,6 +27,7 @@ import { UsersMapService } from './usersMap/usersMap.service';
   imports: [
     CommonModule,
     FormsModule,
+    AppTranslationModule,
     NgaModule,
     routing
   ],

src/app/pages/dashboard/pieChart/pieChart.html

@@ -7,7 +7,7 @@
         <span class="percent"></span>
       </div>
       <div class="description">
-        <div>{{ chart.description }}</div>
+        <div translate>{{ chart.description }}</div>
         <div class="description-stats">{{ chart.stats }}</div>
       </div>
       <i class="chart-icon i-{{ chart.icon }}"></i>

src/app/pages/dashboard/pieChart/pieChart.service.ts

@@ -12,22 +12,22 @@ export class PieChartService {
     return [
       {
         color: pieColor,
-        description: 'New Visits',
+        description: 'general.dashboard.newVisits',
         stats: '57,820',
         icon: 'person',
       }, {
         color: pieColor,
-        description: 'Purchases',
+        description: 'general.dashboard.purchases',
         stats: '$ 89,745',
         icon: 'money',
       }, {
         color: pieColor,
-        description: 'Active Users',
+        description: 'general.dashboard.activeUsers',
         stats: '178,391',
         icon: 'face',
       }, {
         color: pieColor,
-        description: 'Returned',
+        description: 'general.dashboard.returned',
         stats: '32,592',
         icon: 'refresh',
       }

src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html

@@ -6,7 +6,7 @@
     <div class="col-md-4">
       <label class="radio-inline custom-radio nowrap">
         <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
-        <span>Option 1</span>
+        <span translate>{{'general.forms.option1'}}</span>
       </label>
     </div>
     <div class="col-md-4">

src/app/pages/forms/forms.module.ts

@@ -1,6 +1,7 @@
 import { NgModule }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
 import { FormsModule as AngularFormsModule } from '@angular/forms';
+import { AppTranslationModule } from '../../app.translation.module';
 import { NgaModule } from '../../theme/nga.module';
 
 import { routing }       from './forms.routing';
@@ -27,6 +28,7 @@ import { WithoutLabelsForm } from './components/layouts/components/withoutLabels
   imports: [
     CommonModule,
     AngularFormsModule,
+    AppTranslationModule,
     NgaModule,
     RatingModule.forRoot(),
     routing