fix(lib): ability to predefince specific countries #12 #20

angular-material-extensions · Aug 30, 2020 · b3ecbb3 · b3ecbb3
1 parent 1cbc85c
commit b3ecbb3
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 9 deletions.
diff --git a/projects/angular-material-extensions/select-country/package.json b/projects/angular-material-extensions/select-country/package.json
@@ -48,12 +48,12 @@
     "test:watch": "../../../node_modules/.bin/jest --coverage --watch"
   },
   "peerDependencies": {
-    "@angular/common": "^9.1.12",
-    "@angular/core": "^9.1.12",
-    "@angular/forms": "^9.1.12",
-    "@angular/platform-browser": "^9.1.12",
-    "@angular/cdk": "~9.2.4",
-    "@angular/material": "~9.2.4",
+    "@angular/common": "^10.0.0",
+    "@angular/core": "^10.0.0",
+    "@angular/forms": "^10.0.0",
+    "@angular/platform-browser": "^10.0.0",
+    "@angular/cdk": "~10.1.0",
+    "@angular/material": "~10.1.0",
     "rxjs": "^6.6.0"
   },
   "engines": {

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
@@ -19,7 +19,7 @@ export interface Country {
 /**
  * @author Anthony Nahas
  * @since 11.19
- * @version 1.0
+ * @version 2.1.0
  */
 @Component({
   selector: 'mat-select-country',
@@ -45,12 +45,12 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, ControlValu
   @Input() nullable: boolean;
   @Input() readonly: boolean;
   @Input() class: string;
+  @Input() countries: Country[] = COUNTRIES_DB;
 
   @Output() onCountrySelected: EventEmitter<Country> = new EventEmitter<Country>();
 
 
   countryFormControl = new FormControl();
-  countries: Country[] = COUNTRIES_DB;
   filteredOptions: Observable<Country[]>;
 
   propagateChange = (_: any) => {

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
@@ -19,14 +19,17 @@ import {COUNTRIES_DB} from './db';
   declarations: [MatSelectCountryComponent],
   imports: [
     CommonModule,
+
+    // Forms
     FormsModule,
     ReactiveFormsModule,
+
+    // Material
     MatButtonModule,
     MatMenuModule,
     MatInputModule,
     MatAutocompleteModule,
     MatIconModule
-    // FlexLayoutModule
   ],
   exports: [MatSelectCountryComponent]
 })

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -435,6 +435,7 @@ <h2>Usage</h2>
   <div fxLayoutAlign="center">
     <mat-select-country appearance="outline"
                         label="Country"
+                        [countries]="predefinedCountries"
                         (onCountrySelected)="onCountrySelected($event)">
     </mat-select-country>
   </div>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -15,6 +15,33 @@ export class AppComponent implements OnInit {
   countryFormControl = new FormControl();
   countryFormGroup: FormGroup;
 
+  predefinedCountries: Country[] = [
+    {
+      name: 'Germany',
+      alpha2Code: 'DE',
+      alpha3Code: 'DEU',
+      numericCode: '276'
+    },
+    {
+      name: 'Greece',
+      alpha2Code: 'GR',
+      alpha3Code: 'GRC',
+      numericCode: '300'
+    },
+    {
+      name: 'France',
+      alpha2Code: 'FR',
+      alpha3Code: 'FRA',
+      numericCode: '250'
+    },
+    {
+      name: 'Belgium',
+      alpha2Code: 'BE',
+      alpha3Code: 'BEL',
+      numericCode: '056'
+    },
+  ];
+
   constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
               private formBuilder: FormBuilder) {
     angulartics2GoogleAnalytics.startTracking();