CP #0 Include i18n handling (fr/en)

package-lock.json

@@ -901,6 +901,22 @@
         }
       }
     },
+    "@ngx-translate/core": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-11.0.1.tgz",
+      "integrity": "sha512-nBCa1ZD9fAUY/3eskP3Lql2fNg8OMrYIej1/5GRsfcutx9tG/5fZLCv9m6UCw1aS+u4uK/vXjv1ctG/FdMvaWg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "@ngx-translate/http-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-4.0.0.tgz",
+      "integrity": "sha512-x8LumqydWD7eX9yQTAVeoCM9gFUIGVTUjZqbxdAUavAA3qVnk9wCQux7iHLPXpydl8vyQmLoPQR+fFU+DUDOMA==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@schematics/angular": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-7.1.4.tgz",
@@ -4676,13 +4692,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4699,8 +4713,7 @@
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -4829,7 +4842,6 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }

package.json

@@ -21,6 +21,8 @@
     "@angular/platform-browser": "~7.1.0",
     "@angular/platform-browser-dynamic": "~7.1.0",
     "@angular/router": "~7.1.0",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
     "angular-font-awesome": "^3.1.2",
     "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",

src/app/app.component.html

@@ -18,8 +18,8 @@
 </p-toolbar>
 
 <p-dialog id="modalLogIn" [modal]=true [(visible)]="DisplayLoginModal">
-    <p-header>
-        Log In
+    <p-header translate>
+        App.Login
     </p-header>
 
     <div class="ui-inputgroup">

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { AppService } from './app.service';
+import { TranslateService } from '@ngx-translate/core';
 
 
 @Component({
@@ -25,13 +26,17 @@ export class AppComponent implements OnInit{
   public birthday: Date;
 
   constructor(
-    private _appService: AppService
+    private _appService: AppService,
+    private _translateService: TranslateService
   ){}
+
   ngOnInit(){
     this.items = [
       {label: 'Update', icon: 'pi pi-refresh'},
       {label: 'Delete', icon: 'pi pi-times'} 
   ];
+  // To Include in a fonction of a dropdown language chose
+  this._translateService.setDefaultLang('fr');
   }
 
   

src/app/app.module.ts

@@ -5,7 +5,7 @@ import { NgModule, Provider, APP_INITIALIZER } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomePageComponent } from './home-page/home-page.component';
-import { HttpClientModule } from '@angular/common/http'; 
+import { HttpClientModule, HttpClient } from '@angular/common/http'; 
 
 import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@@ -22,6 +22,9 @@ import { AppService } from './app.service';
 import { FormsModule } from '@angular/forms';
 import { CalendarModule } from 'primeng/calendar';
 
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+
 
 
 
@@ -38,6 +41,10 @@ export const INIT_API_CONFIGURATION: Provider = {
   multi:true
 };
 
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
 
 
 @NgModule({
@@ -61,7 +68,14 @@ export const INIT_API_CONFIGURATION: Provider = {
     InputTextModule,
     HttpClientModule,
     FormsModule,
-    CalendarModule
+    CalendarModule,
+    TranslateModule.forRoot({
+      loader: {
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [HttpClient]
+      }
+  })
   ],
   providers: [
     INIT_API_CONFIGURATION,

src/assets/i18n/en.json

@@ -0,0 +1,5 @@
+{
+    "App":{
+        "Login":"LOGIN"
+    }
+}

src/assets/i18n/fr.json

@@ -0,0 +1,5 @@
+{
+    "App":{
+        "Login":"Se Connecter"
+    }
+}