[WIP] Adding i18n support to the client.

client/angular-cli-build.js

@@ -11,6 +11,7 @@ module.exports = function(defaults) {
       'es6-shim/es6-shim.js',
       'reflect-metadata/**/*.+(js|js.map)',
       'rxjs/**/*.+(js|js.map)',
+      'ng2-translate/**/*.*',
       '@angular/**/*.+(js|js.map)'
     ]
   });

client/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "2.0.0-rc.1",
     "@angular/router": "2.0.0-rc.1",
     "es6-shim": "^0.35.0",
+    "ng2-translate": "2.1.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.26",

client/src/app/+home/home.component.html

@@ -1,2 +1,9 @@
 
+<div>
+  {{ 'OPEN_PENSION' | translate }}
+</div>
+        Change language:
+<select (change)="translate.use($event.target.value)">
+    <option *ngFor="let lang of ['he', 'en']" [selected]="lang === translate.currentLang">{{lang}}</option>
+</select>
 <op-managing-bodies></op-managing-bodies>

client/src/app/+home/home.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { TranslateService, TranslatePipe } from 'ng2-translate/ng2-translate';
 
 import { ManagingBodiesComponent } from '../+managing-bodies/managing-bodies.component';
 
@@ -7,11 +8,12 @@ import { ManagingBodiesComponent } from '../+managing-bodies/managing-bodies.com
   selector: 'op-home',
   templateUrl: 'home.component.html',
   styleUrls: ['home.component.css'],
+  pipes: [TranslatePipe],
   directives: [ManagingBodiesComponent]
 })
 
 export class HomeComponent {
 
-  constructor() {}
+  constructor(public translate: TranslateService) {}
 
 }

client/src/app/op.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { HTTP_PROVIDERS } from '@angular/http';
 import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
+import { TranslateService, TRANSLATE_PROVIDERS } from 'ng2-translate/ng2-translate';
 
 import { HomeComponent } from './+home';
 import { AboutComponent } from './+about';
@@ -12,7 +13,7 @@ import { ManagingBodiesComponent } from './+managing-bodies';
   templateUrl: 'op.component.html',
   styleUrls: ['op.component.css'],
   directives: [ROUTER_DIRECTIVES],
-  providers: [HTTP_PROVIDERS, ROUTER_PROVIDERS]
+  providers: [HTTP_PROVIDERS, ROUTER_PROVIDERS, TRANSLATE_PROVIDERS]
 })
 
 @Routes([
@@ -32,5 +33,15 @@ import { ManagingBodiesComponent } from './+managing-bodies';
 ])
 
 export class OpAppComponent {
-  title = 'op works!';
+  title: string = 'op works!';
+
+  constructor(public translate: TranslateService) {
+      // use navigator lang if available
+      var userLang = navigator.language.split('-')[0];
+      userLang = /(he|en)/gi.test(userLang) ? userLang : 'he';
+
+      console.log(userLang);
+      // this trigger the use of the hebrew or english language after setting the translations.
+      translate.use(userLang);
+  }
 }

client/src/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "OPEN_PENSION": "Open Pension"
+}

client/src/i18n/he.json

@@ -0,0 +1,3 @@
+{
+  "OPEN_PENSION": "פנסיה פתוחה"
+}

client/src/system-config.ts

@@ -3,10 +3,14 @@
  **********************************************************************************************/
 /** Map relative paths to URLs. */
 const map: any = {
+  'ng2-translate': 'vendor/ng2-translate'
 };
 
 /** User packages configuration. */
 const packages: any = {
+  'ng2-translate': {
+    defaultExtension: 'js'
+  }
 };
 
 ////////////////////////////////////////////////////////////////////////////////////////////////