mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
👽 add ngx translate config
This commit is contained in:
parent
cc7b4661ee
commit
d1ced70b1b
26
package-lock.json
generated
26
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
}
|
||||
|
||||
7
src/assets/i18n/en.json
Normal file
7
src/assets/i18n/en.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"Title": "Translation example",
|
||||
"Intro": "Hello I am {{name}}, I am {{age}} years old.",
|
||||
"home": {
|
||||
"title": "home's title"
|
||||
}
|
||||
}
|
||||
7
src/assets/i18n/fr.json
Normal file
7
src/assets/i18n/fr.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user