👽 add ngx translate config

package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "framadate",
-  "version": "0.0.0",
+  "name": "framadate-funky-frontend",
+  "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1192,6 +1192,22 @@
         "webpack-sources": "1.3.0"
       }
     },
+    "@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": "8.2.1",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-8.2.1.tgz",
@@ -4310,9 +4326,9 @@
       "dev": true
     },
     "handlebars": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
-      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.0.tgz",
+      "integrity": "sha512-xkRtOt3/3DzTKMOt3xahj2M/EqNhY988T+imYSlMgs5fVhLN2fmKVVj0LtEGmb+3UUYV5Qmm1052Mm3dIQxOvw==",
       "dev": true,
       "requires": {
         "neo-async": "^2.6.0",

package.json

@@ -20,6 +20,8 @@
         "@angular/platform-browser": "~8.2.0",
         "@angular/platform-browser-dynamic": "~8.2.0",
         "@angular/router": "~8.2.0",
+        "@ngx-translate/core": "^11.0.1",
+        "@ngx-translate/http-loader": "^4.0.0",
         "rxjs": "~6.4.0",
         "tslib": "^1.10.0",
         "zone.js": "~0.9.1"

src/app/app.component.html

@@ -19,3 +19,13 @@
     <router-outlet></router-outlet>
 </main>
 <framadate-debugger></framadate-debugger>
+<div id="translate_example">
+    <div class="lang-choices">
+        <button (click)="switchLanguage('en')">en</button>
+        <button (click)="switchLanguage('fr')">fr</button>
+    </div>
+    <h1 translate>Title</h1>
+    <div>
+        {{ 'Intro' | translate:user }}
+    </div>
+</div>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {TranslateService} from "@ngx-translate/core";
 
 @Component({
     selector: 'app-root',
@@ -9,4 +10,17 @@ export class AppComponent {
     title = 'framadate';
     //translation demo:
     minutes = 12;
+    user = {
+        name: 'Arthur',
+        age: 42
+    };
+
+    constructor(private translate: TranslateService) {
+        this.translate.setDefaultLang('fr');
+    }
+
+    switchLanguage(language: string) {
+        this.translate.use(language);
+    }
+
 }

src/app/app.module.ts

@@ -10,59 +10,72 @@ import {FormsModule} from '@angular/forms';
 import {NavigationComponent} from './ui/navigation/navigation.component';
 import {RouterModule} from '@angular/router';
 import {Routes} from './config/Routes';
-import {CommonModule} from '@angular/common';
-import { DatesComponent } from './pages/dates/dates.component';
-import { DebuggerComponent } from './debugger/debugger.component';
-import { VisibilityComponent } from './pages/visibility/visibility.component';
-import { ResumeComponent } from './pages/resume/resume.component';
-import { PicturesComponent } from './pages/pictures/pictures.component';
-import { AnswersComponent } from './pages/answers/answers.component';
-import { EndConfirmationComponent } from './pages/end-confirmation/end-confirmation.component';
-import { CreateOrRetrieveComponent } from './pages/create-or-retrieve/create-or-retrieve.component';
-import { CalendarComponent } from './calendar/calendar.component';
-
-import { registerLocaleData } from '@angular/common';
+import {CommonModule, registerLocaleData} from '@angular/common';
+import {DatesComponent} from './pages/dates/dates.component';
+import {DebuggerComponent} from './debugger/debugger.component';
+import {VisibilityComponent} from './pages/visibility/visibility.component';
+import {ResumeComponent} from './pages/resume/resume.component';
+import {PicturesComponent} from './pages/pictures/pictures.component';
+import {AnswersComponent} from './pages/answers/answers.component';
+import {EndConfirmationComponent} from './pages/end-confirmation/end-confirmation.component';
+import {CreateOrRetrieveComponent} from './pages/create-or-retrieve/create-or-retrieve.component';
+import {CalendarComponent} from './calendar/calendar.component';
 import localeFr from '@angular/common/locales/fr';
-import { VotingSummaryComponent } from './pages/voting-summary/voting-summary.component';
-import { VotingGraphComponent } from './pages/voting-graph/voting-graph.component';
-import { VotingChoiceComponent } from './pages/voting-choice/voting-choice.component';
-import { PasswordComponent } from './pages/password/password.component';
-import { HomeComponent } from './pages/home/home.component';
+import {VotingSummaryComponent} from './pages/voting-summary/voting-summary.component';
+import {VotingGraphComponent} from './pages/voting-graph/voting-graph.component';
+import {VotingChoiceComponent} from './pages/voting-choice/voting-choice.component';
+import {PasswordComponent} from './pages/password/password.component';
+import {HomeComponent} from './pages/home/home.component';
+import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 
 registerLocaleData(localeFr, 'fr');
 
+export function HttpLoaderFactory(http: HttpClient) {
+    return new TranslateHttpLoader(http);
+}
+
 @NgModule({
-  declarations: [
-    AppComponent,
-    BaseComponent,
-    KindComponent,
-    HeaderComponent,
-    NavigationComponent,
-    DatesComponent,
-    DebuggerComponent,
-    VisibilityComponent,
-    ResumeComponent,
-    PicturesComponent,
-    AnswersComponent,
-    EndConfirmationComponent,
-    CreateOrRetrieveComponent,
-    CalendarComponent,
-    VotingSummaryComponent,
-    VotingGraphComponent,
-    VotingChoiceComponent,
-    PasswordComponent,
-    HomeComponent,
+    declarations: [
+        AppComponent,
+        BaseComponent,
+        KindComponent,
+        HeaderComponent,
+        NavigationComponent,
+        DatesComponent,
+        DebuggerComponent,
+        VisibilityComponent,
+        ResumeComponent,
+        PicturesComponent,
+        AnswersComponent,
+        EndConfirmationComponent,
+        CreateOrRetrieveComponent,
+        CalendarComponent,
+        VotingSummaryComponent,
+        VotingGraphComponent,
+        VotingChoiceComponent,
+        PasswordComponent,
+        HomeComponent,
 
-  ],
-  imports: [
-    CommonModule,
-    BrowserModule,
-    AppRoutingModule,
-    FormsModule,
-    RouterModule.forRoot(Routes)
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    ],
+    imports: [
+        CommonModule,
+        BrowserModule,
+        AppRoutingModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient]
+            }
+        }),
+        HttpClientModule,
+        FormsModule,
+        RouterModule.forRoot(Routes)
+    ],
+    providers: [TranslateService],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
 }

src/assets/i18n/en.json

@@ -0,0 +1,7 @@
+{
+    "Title": "Translation example",
+    "Intro": "Hello I am {{name}}, I am {{age}} years old.",
+    "home": {
+        "title": "home's title"
+    }
+}

src/assets/i18n/fr.json

@@ -0,0 +1,7 @@
+{
+    "Title": "Example de traduction",
+    "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
+    "home": {
+        "title": "le titre de la home"
+    }
+}