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

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

Hide file tree

Showing 5 changed files with 101 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -142,6 +142,7 @@ Other modules in your application like for lazy loading import ` MatSelectCountr
 | value      | `Input()`  | `Country`    | - |  the selected country
 | appearance      | `Input()`  | `MatFormFieldAppearance`    | - |  Possible appearance styles for `mat-form-field` | 'legacy' | 'standard' | 'fill' | 'outline'
 | country      | `Input()`  | `string`    | - |  Value to be set to the input (possible values are `Country` interface properties, case-insensitive)
+| countries      | `Input()`  | `Country[]`    | All countries stored in the lib |  Countries that should be loaded - predefine the countries that you only need! 
 | label      | `Input()`  | `boolean`    | - |  `mat-form-field` label's text
 | placeHolder      | `Input()`  | `boolean`    | - |  input placeholder text
 | disabled      | `Input()`  | `boolean`    | - |  Whether the component is disabled
@@ -259,6 +260,55 @@ export class AppComponent implements OnInit{
 ```
 
 
+### Predefine your countries to load
+
+```html
+<mat-select-country appearance="outline"
+                    label="Country"
+                    [countries]="predefinedCountries"
+                    (onCountrySelected)="onCountrySelected($event)">
+</mat-select-country>
+```
+
+```typescript
+import {Country} from '@angular-material-extensions/select-country';
+
+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'
+    },
+  ];
+```
+
+Result:
+
+<p align="center">
+  <img alt="@angular-material-extensions/select-country demonstration" style="text-align: center;"
+   src="https://raw.githubusercontent.com/angular-material-extensions/select-country/HEAD/assets/v2.1.0/predefined.png">
+</p>
+
+
 
 <a name="run-demo-app-locally"/>
 

diff --git a/assets/v2.1.0/predefined.png b/assets/v2.1.0/predefined.png
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
@@ -39,13 +39,13 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, ControlValu
   @Input() private _value: Country;
   @Input() appearance: MatFormFieldAppearance;
   @Input() country: string;
+  @Input() countries: Country[] = COUNTRIES_DB;
   @Input() label: string;
   @Input() placeHolder = 'Select country';
   @Input() disabled: boolean;
   @Input() nullable: boolean;
   @Input() readonly: boolean;
   @Input() class: string;
-  @Input() countries: Country[] = COUNTRIES_DB;
 
   @Output() onCountrySelected: EventEmitter<Country> = new EventEmitter<Country>();
 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -452,18 +452,20 @@ <h2 class="div-ex2">Usage with Reactive Forms</h2>
     </mat-select-country>
   </div>
 
-  <!--  <form [formGroup]="countryFormGroup">-->
-  <!--    <div fxLayoutAlign="center">-->
-  <!--      <mat-select-country appearance="outline"-->
-  <!--                          label="Country"-->
-  <!--                          formControlName="country"-->
-  <!--                          (onCountrySelected)="onCountrySelected($event)">-->
-  <!--      </mat-select-country>-->
-  <!--    </div>-->
-  <!--  </form>-->
-
   <markdown src="assets/md/e2.md"></markdown>
 
+  <h2 class="div-ex2">Usage with predefined countries</h2>
+
+  <div fxLayoutAlign="center">
+    <mat-select-country appearance="outline"
+                        label="Country"
+                        [countries]="predefinedCountries"
+                        (onCountrySelected)="onCountrySelected($event)">
+    </mat-select-country>
+  </div>
+
+  <markdown src="assets/md/predefined/e1.md"></markdown>
+
   <p>For more info, please read the official readme - see the links above GITHUB - DOCS - NPM</p>
 
   <!--  </div>-->

diff --git a/src/assets/md/predefined/e1.md b/src/assets/md/predefined/e1.md
@@ -0,0 +1,38 @@
+```html
+<mat-select-country appearance="outline"
+                    label="Country"
+                    [countries]="predefinedCountries"
+                    (onCountrySelected)="onCountrySelected($event)">
+</mat-select-country>
+```
+
+```typescript
+import {Country} from '@angular-material-extensions/select-country';
+
+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'
+    },
+  ];
+```