From 3aee9f5abb361ae29deabf6331a9f6442075de6d Mon Sep 17 00:00:00 2001 From: Anthony Nahas Date: Thu, 24 Sep 2020 22:13:24 +0200 Subject: [PATCH] fix(i18n): improved i18n feature --- angular.json | 1 - .../src/lib/mat-select-country.component.ts | 57 ++++++++++++++----- .../src/lib/mat-select-country.module.ts | 42 ++++++-------- .../select-country/src/lib/tokens/index.ts | 2 +- src/app/app.module.ts | 2 +- 5 files changed, 64 insertions(+), 40 deletions(-) diff --git a/angular.json b/angular.json index 13c5593..880ba1e 100644 --- a/angular.json +++ b/angular.json @@ -17,7 +17,6 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "outputPath": "dist/browser", "index": "src/index.html", "main": "src/main.ts", diff --git a/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts index 64ce7cc..1d805bd 100644 --- a/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts +++ b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts @@ -11,12 +11,13 @@ import { SimpleChanges, ViewChild } from '@angular/core'; -import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '@angular/forms'; -import {fromEvent, Subject, Subscription} from 'rxjs'; -import {debounceTime, startWith, takeUntil} from 'rxjs/operators'; -import {MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger} from '@angular/material/autocomplete'; -import {MatFormFieldAppearance} from '@angular/material/form-field'; -import {MatSelectCountryDBToken} from './tokens'; +import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete'; +import { MatFormFieldAppearance } from '@angular/material/form-field'; +import { fromEvent, Subject, Subscription } from 'rxjs'; +import { debounceTime, startWith, takeUntil } from 'rxjs/operators'; +import { MatSelectCountryLangToken } from './tokens'; + /** * Country interface ISO 3166 */ @@ -59,8 +60,10 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy, @ViewChild('countryAutocomplete') statesAutocompleteRef: MatAutocomplete; @ViewChild(MatAutocompleteTrigger) autocompleteTrigger: MatAutocompleteTrigger; @Output() onCountrySelected: EventEmitter = new EventEmitter(); + countryFormControl = new FormControl(); filteredOptions: Country[]; + db: Country[]; debounceTime = 300; filterString = ''; private modelChanged: Subject = new Subject(); @@ -70,8 +73,36 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy, @Input() private _value: Country; - constructor(@Inject(forwardRef(() => MatSelectCountryDBToken)) public db: Country[]) { - console.log('db after MatSelectCountryDBToken', db); + constructor(@Inject(forwardRef(() => MatSelectCountryLangToken)) public lang: string) { + console.log('lang', lang); + switch (lang) { + case 'de': + console.log('test'); + import('./i18n/de').then(result => result.COUNTRIES_DB_DE).then(y => { + this.countries = y; + return y; + }); + break; + case 'it': + import('./i18n/it').then(result => result.COUNTRIES_DB_IT).then(y => { + this.countries = y; + return y; + }); + break; + case 'fr': + import('./i18n/fr').then(result => result.COUNTRIES_DB_FR).then(y => { + this.countries = y; + return y; + }); + break; + default: + import('./i18n/fr').then(result => result.COUNTRIES_DB_FR).then(y => { + this.countries = y; + return y; + }); + break; + } + console.log('x', this.countries); } get value(): Country { @@ -86,16 +117,16 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy, propagateChange = (_: any) => { }; - ngOnInit() { + async ngOnInit() { - if (!this.countries) { - this.countries = this.db; - } + // if (!this.countries) { + // this.countries = await this.db; + // } this.subscription = this.modelChanged .pipe( startWith(''), - debounceTime(this.debounceTime), + debounceTime(this.debounceTime) ) .subscribe((value) => { this.filterString = value; diff --git a/projects/angular-material-extensions/select-country/src/lib/mat-select-country.module.ts b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.module.ts index 68faf17..f25fd23 100644 --- a/projects/angular-material-extensions/select-country/src/lib/mat-select-country.module.ts +++ b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.module.ts @@ -1,24 +1,22 @@ -import {CommonModule} from '@angular/common'; -import {ModuleWithProviders, NgModule} from '@angular/core'; -import {MatSelectCountryComponent} from './mat-select-country.component'; -import {MatAutocompleteModule} from '@angular/material/autocomplete'; -import {MatButtonModule} from '@angular/material/button'; -import {MatIconModule, MatIconRegistry} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; -import {MatMenuModule} from '@angular/material/menu'; -import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {DomSanitizer} from '@angular/platform-browser'; -import {COUNTRIES_DB} from './db'; -import {MatSelectCountryDBToken} from './tokens'; +import { CommonModule } from '@angular/common'; +import { ModuleWithProviders, NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule, MatIconRegistry } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatMenuModule } from '@angular/material/menu'; +import { DomSanitizer } from '@angular/platform-browser'; +import { COUNTRIES_DB } from './db'; +import { MatSelectCountryComponent } from './mat-select-country.component'; +import { MatSelectCountryLangToken } from './tokens'; export type MatSelectCountrySupportLanguages = 'en' | 'de' | 'fr' | 'es' | 'it'; -// export function loadDB(i18n?: string) { -// return import('./i18n/de').then(result => { -// return result.COUNTRIES_DB_DE; -// }); -// } +export function loadDB(i18n?: string) { + return import('./i18n/de').then(result => result.COUNTRIES_DB_DE); +} /** * @author Anthony Nahas @@ -49,18 +47,14 @@ export class MatSelectCountryModule { this.registerCountries(); } - static forRoot(i18n: MatSelectCountrySupportLanguages = 'de'): ModuleWithProviders { + static forRoot(i18n: MatSelectCountrySupportLanguages): ModuleWithProviders { return { ngModule: MatSelectCountryModule, providers: [ { - provide: MatSelectCountryDBToken, - // useValue: null - // useFactory: () => import(`'./i18n/${i18n}'`).then(result => { - useFactory: () => import('./i18n/de').then(x => { - return x.COUNTRIES_DB_DE; - }) + provide: MatSelectCountryLangToken, + useValue: i18n, } ] }; diff --git a/projects/angular-material-extensions/select-country/src/lib/tokens/index.ts b/projects/angular-material-extensions/select-country/src/lib/tokens/index.ts index f26096b..3565c94 100644 --- a/projects/angular-material-extensions/select-country/src/lib/tokens/index.ts +++ b/projects/angular-material-extensions/select-country/src/lib/tokens/index.ts @@ -1,4 +1,4 @@ import {InjectionToken} from '@angular/core'; import {Country} from '../mat-select-country.component'; -export const MatSelectCountryDBToken = new InjectionToken('MatSelectCountryDBToken'); +export const MatSelectCountryLangToken = new InjectionToken('MatSelectCountryLangToken'); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5502370..4432599 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,7 +24,7 @@ import {ReactiveFormsModule} from '@angular/forms'; FlexLayoutModule, Angulartics2Module.forRoot(), MarkdownModule.forRoot(), - MatSelectCountryModule.forRoot('de'), + MatSelectCountryModule.forRoot('fr'), ], providers: [], bootstrap: [AppComponent]