fix(i18n): improved i18n feature

angular-material-extensions · Sep 24, 2020 · 3aee9f5 · 3aee9f5
1 parent 513175a
commit 3aee9f5
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 40 deletions.
diff --git 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
@@ -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<Country> = new EventEmitter<Country>();
+
   countryFormControl = new FormControl();
   filteredOptions: Country[];
+  db: Country[];
   debounceTime = 300;
   filterString = '';
   private modelChanged: Subject<string> = new Subject<string>();
@@ -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
@@ -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<MatSelectCountryModule> {
+  static forRoot(i18n: MatSelectCountrySupportLanguages): ModuleWithProviders<MatSelectCountryModule> {
     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
@@ -1,4 +1,4 @@
 import {InjectionToken} from '@angular/core';
 import {Country} from '../mat-select-country.component';
 
-export const MatSelectCountryDBToken = new InjectionToken<Country[]>('MatSelectCountryDBToken');
+export const MatSelectCountryLangToken = new InjectionToken<string>('MatSelectCountryLangToken');
diff --git 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]