diff --git a/package-lock.json b/package-lock.json
index 061e13ed..f8c49d2e 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 9fe668c6..c11a46c6 100644
--- a/package.json
+++ b/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"
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 66e4ce31..25abf861 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -19,3 +19,13 @@
+
+
+
+
+
+
Title
+
+ {{ 'Intro' | translate:user }}
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7a6f834f..32109cdf 100644
--- a/src/app/app.component.ts
+++ b/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);
+ }
+
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2f51ec2e..abda2087 100644
--- a/src/app/app.module.ts
+++ b/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');
-@NgModule({
- declarations: [
- AppComponent,
- BaseComponent,
- KindComponent,
- HeaderComponent,
- NavigationComponent,
- DatesComponent,
- DebuggerComponent,
- VisibilityComponent,
- ResumeComponent,
- PicturesComponent,
- AnswersComponent,
- EndConfirmationComponent,
- CreateOrRetrieveComponent,
- CalendarComponent,
- VotingSummaryComponent,
- VotingGraphComponent,
- VotingChoiceComponent,
- PasswordComponent,
- HomeComponent,
+export function HttpLoaderFactory(http: HttpClient) {
+ return new TranslateHttpLoader(http);
+}
- ],
- imports: [
- CommonModule,
- BrowserModule,
- AppRoutingModule,
- FormsModule,
- RouterModule.forRoot(Routes)
- ],
- providers: [],
- bootstrap: [AppComponent]
+@NgModule({
+ declarations: [
+ AppComponent,
+ BaseComponent,
+ KindComponent,
+ HeaderComponent,
+ NavigationComponent,
+ DatesComponent,
+ DebuggerComponent,
+ VisibilityComponent,
+ ResumeComponent,
+ PicturesComponent,
+ AnswersComponent,
+ EndConfirmationComponent,
+ CreateOrRetrieveComponent,
+ CalendarComponent,
+ VotingSummaryComponent,
+ VotingGraphComponent,
+ VotingChoiceComponent,
+ PasswordComponent,
+ HomeComponent,
+
+ ],
+ 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 {
}
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
new file mode 100644
index 00000000..281c06de
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
new file mode 100644
index 00000000..9f4cae39
--- /dev/null
+++ b/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"
+ }
+}