angular-material-extensions/select-country

Angular Material component that allow users to select a country or nationality with an autocomplete feature

select-country's Issues

'disabled attribute with a reactive form directive' warning

When debuging I get this message on the console using select-country extension:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.
Example:
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});

I'm using Angular 10.0.2 and I'm already using the 'disabled' option in my code without this warning.

No authorization token was found while importing MatSelectCountryModule

Describe the bug
When importing MatSelectCountryModule to an existing module.ts file, I'm getting No authorization token was found error.

To Reproduce
Steps to reproduce the behavior:

1. Using express-JWT to generate auth tokens.
2. import { MatSelectCountryModule } from '@angular-material-extensions/select-country';
3. Error happens.

Expected behavior
I'm not sure why the MatSelectCountryModule needs a auth, looking into it now.

Error when build for production

Describe the bug
When I try to build my Angular project for production, I get the following message:

"ERROR in ./node_modules/@angular-material-extensions/select-country/fesm5/angular-material-extensions-select-country.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35)
at checkNodeForDecorators (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21)
at visitNodes (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16144:30)
at Object.forEachChild (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16370:24)
at checkNodeForDecorators (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16135:24)
at Object.forEachChild (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16265:21)
at checkNodeForDecorators (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16135:24)
at Object.forEachChild (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16322:24)
at checkNodeForDecorators (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16135:24)
at Object.forEachChild (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16333:24)
at checkNodeForDecorators (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16135:24)
at Object.forEachChild (C:\Users\josea\Documents\Desarrollo\VyooTrip\vyoo-frontend\src\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16229:21)"

I tried to upgrade and downgrade a huge list of typescript versions but no one worked for me. This error only happens with this library. I also try the solution of setting the buildOptimizer in angular.json to false and this works, but the amount of data and code that is uploading to server is too much.

To Reproduce
Run ng build --prod

Expected behavior
A successfully end when running the production build command.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome, Firefox Developer Edition

Additional context
Maybe if you deleted the one lines comment in the library might the things work?

I'm using the 1.2.0 version because with the followings I get this problem: #25

Error after updating to 3.0.0

Describe the bug
Updated version to 3.0.0 and the component is causing some crashes to my dialog component.

Error Log
core.js:4352 ERROR NullInjectorError: R3InjectorError(AppModule)[InjectionToken MatSelectCountryLangToken -> InjectionToken MatSelectCountryLangToken -> InjectionToken MatSelectCountryLangToken]: NullInjectorError: No provider for InjectionToken MatSelectCountryLangToken! at NullInjector.get (http://localhost:4200/vendor.js:55616:27) at R3Injector.get (http://localhost:4200/vendor.js:65727:33) at R3Injector.get (http://localhost:4200/vendor.js:65727:33) at R3Injector.get (http://localhost:4200/vendor.js:65727:33) at NgModuleRef$1.get (http://localhost:4200/vendor.js:78848:33) at Object.get (http://localhost:4200/vendor.js:78552:35) at getOrCreateInjectable (http://localhost:4200/vendor.js:58682:39) at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:69256:12) at NodeInjectorFactory.MatSelectCountryComponent_Factory [as factory] (http://localhost:4200/vendor.js:15135:189) at getNodeInjectable (http://localhost:4200/vendor.js:58787:44) defaultErrorLogger @ core.js:4352 handleError @ core.js:4400 handleError @ core.js:8767 executeListenerWithErrorHandling @ core.js:15219 wrapListenerIn_markDirtyAndPreventDefault @ core.js:15251 (anonymous) @ platform-browser.js:582 invokeTask @ zone-evergreen.js:399 onInvokeTask @ core.js:27476 invokeTask @ zone-evergreen.js:398 runTask @ zone-evergreen.js:167 invokeTask @ zone-evergreen.js:480 invokeTask @ zone-evergreen.js:1621 globalZoneAwareCallback @ zone-evergreen.js:1647

core.js:4352 ERROR TypeError: Cannot read property 'focusInitialElementWhenReady' of undefined at MatDialogContainer._trapFocus (dialog.js:196) at MatDialogContainer._onAnimationDone (dialog.js:301) at MatDialogContainer_animation_dialogContainer_done_HostBindingHandler (dialog.js:328) at executeListenerWithErrorHandling (core.js:15216) at wrapListenerIn_markDirtyAndPreventDefault (core.js:15251) at animations.js:188 at ZoneDelegate.invoke (zone-evergreen.js:364) at Object.onInvoke (core.js:27488) at ZoneDelegate.invoke (zone-evergreen.js:363) at Zone.run (zone-evergreen.js:123)

Spelling mistake

India spelling mistake

Slow dropdown list opening on empty

Describe the bug
When the component is empty and the user clicks to open, the dropdown list is opening after a few seconds (2 or 3) which feels buggy.

To Reproduce
Steps to reproduce the behavior:

1. Go to demo page https://angular-material-extensions.github.io/select-country/
2. Click on the select component to open list
3. And you will see short time that seems like select is not reacting on click

Expected behavior
I would like to open it immediately.

Desktop (please complete the following information):

• OS: OSX
• Browser: Chrome
• Version: the newest

Additional context
If this is difficult to fix, can we at least open immediately dropdown with loader? It will be more user friendly

Marking the form control as required does not show a * beside the field.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Marking the form control as required does not show a * beside the field.
Describe the solution you'd like
A clear and concise description of what you want to happen.
When a material form field is marked as required, the * shows up beside the field. I do not see it when using mat-select-country. Tried on html tag and in the type script file as well...
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

tabIndex does not focus on the input, but to the all component.

I have a registration page where user selects his country.
I use tabIndex on each/input select element, but when I click tab to focus on the mat-select-country, it focuses on the all element instead of the input, so I can't really type anything.

I use angular 11.2.3 with select-country 4.0.3 and angular material 11.2.2.

and this is how i use mat-select-country:

       <mat-select-country appearance="outline"
                                i18n-label
                                label="Country"
                                formControlName="country" tabindex="6">
            </mat-select-country>

country name is displayed with - at end

If not passing alpha3Code in countries array then - is displayed after country name.
There should be a condition check if no alpha3Code is set in array then even - should not be displayed
Sorry my bad English
Please go through this page

[showCallingCode] binding is not working

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Serve error with esm5

Hello,

i tried the latest version auf select-country v1.3.0. But starting the project with esm5 compiler doesn't work. Version 1.2.0 it works but there i have some issues with reactive forms (formGroups). It also doesn't work so i want the newest version.

The error is:

Compiling @angular-material-extensions/select-country : module as esm5
Error: Error on worker #1: Error: getInternalNameOfClass() called on a non-ES5 class: expected MatSelectCountryComponent to have an inner class declaration

tsconfig.json target => "target": "es5"

• OS: Windows
• Angular v 9.1.9

[Bug] Schematic not working for 2.0.0

Describe the bug
The current schematic doesn't work with latest version (2.0.0).

To Reproduce
Steps to reproduce the behavior:

1. Setup Angular material by running ng add @angular/material
2. Now setup this library using the schematics by running ng add @angular-material-extensions/select-country
3. See error log below

$ ng add @angular-material-extensions/select-country
Invalid peer dependency @angular/common found in package.
Invalid peer dependency @angular/core found in package.
Invalid peer dependency @angular/forms found in package.
Invalid peer dependency @angular/platform-browser found in package.
Invalid peer dependency @angular/common found in package.
Invalid peer dependency @angular/core found in package.
Invalid peer dependency @angular/forms found in package.
Invalid peer dependency @angular/platform-browser found in package.
Unable to find compatible package.  Using 'latest'.
Package has unmet peer dependencies. Adding the package may not succeed.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
An unhandled exception occurred: Cannot find module '@schematics/angular/utility/project'
Require stack:
- D:\Programming\angular_projects\kingdarboja-io\node_modules\@angular-material-extensions\select-country\schematics\helpers\angular\project.js
- D:\Programming\angular_projects\kingdarboja-io\node_modules\@angular-material-extensions\select-country\schematics\helpers\angular\index.js
- D:\Programming\angular_projects\kingdarboja-io\node_modules\@angular-material-extensions\select-country\schematics\helpers\index.js
- D:\Programming\angular_projects\kingdarboja-io\node_modules\@angular-material-extensions\select-country\schematics\ng-add\index.js
- D:\Programming\angular_projects\kingdarboja-io\node_modules\@angular-devkit\schematics\tools\export-ref.js
- D:\Programming\angular_projects\kingdarboja-io\node_modules\@angular-devkit\schematics\tools\index.js
- D:\Programming\angular_projects\kingdarboja-io\node_modules\@angular\cli\utilities\json-schema.js
- D:\Programming\angular_projects\kingdarboja-io\node_modules\@angular\cli\models\command-runner.js
- D:\Programming\angular_projects\kingdarboja-io\node_modules\@angular\cli\lib\cli\index.js
- D:\nvm\v12.14.0\node_modules\@angular\cli\lib\init.js
- D:\nvm\v12.14.0\node_modules\@angular\cli\bin\ng
See "C:\Users\INTEL\AppData\Local\Temp\ng-2ONrqt\angular-errors.log" for further details.

Expected behavior
No issues after running the schematic

Desktop (please complete the following information):

Version: 1.48.2 (user setup)
Commit: a0479759d6e9ea56afa657e454193f72aef85bd0
Date: 2020-08-25T10:13:11.295Z
Electron: 7.3.2
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363

Package.json

{
  "name": "kingdarboja-io",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "prestart": "ngtw build",
    "start": "ng serve & ngtw watch",
    "build": "ngtw build --purge && ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "scully": "scully",
    "scully:build": "npm run build && scully",
    "scully:serve": "scully serve"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.10",
    "@angular/cdk": "^10.1.3",
    "@angular/common": "~10.0.10",
    "@angular/compiler": "~10.0.10",
    "@angular/core": "~10.0.10",
    "@angular/forms": "~10.0.10",
    "@angular/material": "^10.1.3",
    "@angular/platform-browser": "~10.0.10",
    "@angular/platform-browser-dynamic": "~10.0.10",
    "@angular/router": "~10.0.10",
    "@scullyio/init": "1.0.0-beta.0",
    "@scullyio/ng-lib": "latest",
    "@scullyio/scully": "latest",
    "prismjs": "^1.21.0",
    "rxjs": "~6.6.2",
    "tslib": "^2.0.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.6",
    "@angular/cli": "~10.0.6",
    "@angular/compiler-cli": "~10.0.10",
    "@types/jasmine": "~3.5.12",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^14.6.0",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.2",
    "karma": "~5.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "ng-tailwindcss": "^2.3.1",
    "protractor": "~7.0.0",
    "tailwindcss": "^1.6.2",
    "ts-node": "~8.10.2",
    "tslint": "~6.1.3",
    "typescript": "~3.9.7"
  }
}

SVG images countries are not being copied to the proper location (with a fix)

Hi

I installed this wonderful package using the docs, I need to install it manually because of a bug in schematics that was already reported.

the readme states to configure the following in angular.json

"output": "src/assets/svg-country-flags/svg"

with this it creates a src directory in the compiled list directory of the project.

when changing to

"output": "/assets/svg-country-flags/svg"

it copies the images to the proper location

I use angular CLI 10.1.0 with angular 10.1.0

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Error when trying to install latest version on Angular 10

Describe the bug
Hi there! I am getting an error when installing the extension. When I install it through npm i @angular-material-extensions/select-country, the version installed is "@angular-material-extensions/select-country": "3.0.4" and this version does not have the callingCode property in the Country interface. When I try to install like npm i @angular-material-extensions/select-country@latest the following error is shown

When I run ng version I get this:

`Your global Angular CLI version (11.2.6) is greater than your local version (10.0.4). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

Angular CLI: 10.0.4
Node: 14.16.0
OS: win32 x64

Angular: 10.0.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1000.4
@angular-devkit/build-angular 0.1000.4
@angular-devkit/build-optimizer 0.1000.4
@angular-devkit/build-webpack 0.1000.4
@angular-devkit/core 10.0.4
@angular-devkit/schematics 10.0.4
@angular/cdk 10.1.0
@angular/cli 10.0.4
@angular/flex-layout 10.0.0-beta.32
@angular/material 10.1.0
@angular/material-moment-adapter 10.1.0
@ngtools/webpack 10.0.4
@schematics/angular 11.2.6
@schematics/update 0.1000.4
rxjs 6.6.0
typescript 3.9.7
webpack 4.43.0`

To Reproduce
Steps to reproduce the behavior:

1. Create/test on an angular project with an angular cli version greater than 9.
2. Install the extension
3. Check the version of the extension installed
4. Try to install using the @latest flag

Expected behavior
Install the latest version of the extension in a project that uses Angular 10.

Desktop (please complete the following information):

• OS: Windows 10

Additional context
Well, as for additional information I can say that I am running a project that already uses angular material components and that hasn't had any other issues installing other packages so far. Please excuse me if I am being too shallow in providing information, I am quite new to reporting bugs for this kind of project.

Additional country

Missing Moldavia and Uzbekistan at least.

Please refer to:
https://www.worldometers.info/geography/alphabetical-list-of-countries/

Angular warning

I just dropped this component in a reactive form on my app. I am getting chrome warning:
Is there something I am missing out on or is this a bug being triggered?

_```
_It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });_

Just flag is shown

If you show the component with:
<mat-select-country appearance="standard" label="Country" formControlName="country" [countries]="predefinedCountries"> </mat-select-country>
and you have two countries:
this.predefinedCountries = [ { name: 'Brazil', alpha2Code: 'BR', alpha3Code: 'BRL', numericCode: '76' }, { name: 'Greece', alpha2Code: 'GR', alpha3Code: 'GRC', numericCode: '300' },
when you set a selected country with:
this.secondFormGroup = this.formBuilder.group({ country: this.predefinedCountries[1] });
Then in the UI, you expect to see the text 'Greece' with its flag, but just the flag is shown:

No suitable injection token for parameter 'iconRegistry' of class 'MatSelectCountryModule'. no type or decorator

ERROR in Failed to compile entry-point
@angular-material-extensions/select-country (es2015 as esm2015) due to compilation errors:
ntry (es2015 as esm2015) due to compilation errors:
node_modules/@angular-material-extensions/select-country/fesm2015/angular-material-extensions-select-country.js:1354:17 - error NG2003: No suitable injection token for parameter 'iconRegistry' of class 'MatSelectCountryModule'.
no type or decorator

1354 constructor(iconRegistry, sanitizer) {
~~~~~~~~~~~~

Set default country

I want to view an already selected country (using alpha2Code) from API call. Is there any solution available for now? If not is there any other way to do it?

console.log() still present in the last version

Describe the bug
Some console.log is writen by the module.

lang en
angular-material-extensions-select-country.js:205 running with default
angular-material-extensions-select-country.js:129 writeValue

To Reproduce
Steps to reproduce the behavior:

1. Load module
   2 Display field in reactiv form
2. Open console

Expected behavior
I think debug log should never appear.

Desktop (please complete the following information):

• Version 3.0.2

Ability to disable flags

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Add API parameter to disable flags

Describe alternatives you've considered
None

Additional context
Because of flags Component makes way too many requests, I'd like to avoid.

predefined [countries] input not working

I rolled back to version 1.0.1 so that I could overcome the bug where default input label does not show on first render, but now, I am trying to input a predefined countries list (to overcome terrible performance) and it does not recognize the countries list input.

To Reproduce
Add a select-country component to your layout.
configure with [countries]="predefinedCountries" to show a subset of countries.
configure a list in your controller predefinedCountries: Country[] = {...} with a short list.

Expected behavior
I would expect the control to show the short list of predefined countries.
However, the entire list (slow loading) of countries is still present.

Screenshots

Additional context
Is this input supported in version 1.0.1 or was it added in later versions?

Possibility to change the i18n lang outside of the `forRoot`module declaration

Is your feature request related to a problem? Please describe.
Actually our application is translated in several langs and use ngx-translate to manage that. So when one of our users connect to the app we set is langage via this.translate.use(lang);
But with your (awesome ;)) extension the lang is specified directly in the module declaration so it can't be changed afterwords.

Describe the solution you'd like
Would love to have a service associated to your extension in order to change the lang of the module.
Or at least a new parameter in the attributes to specify the lang?

Thanks again for your lib, Chris

Predefined countries

Is it possible to predefined countries somehow? Is there any solution available for now? If not is there any other way to do it?

Flag source in development mode

Describe the bug
Running development mode (ng serve) i getting the wrong source for the flags :

To Reproduce
Steps to reproduce the behavior:

I follow the steps from 'https://www.npmjs.com/package/@angular-material-extensions/select-country#installation'
to add the 'select-country' to my project.

this step :

is relevant only for production

Expected behavior
i getting the wrong source for the flags

Screenshots

Desktop (please complete the following information):
Windows 10 PC with Chrome Browser

Additional context
Add any other context about the problem here.

Missing country Mauritius

The control currently does not include the country of Mauritius

Autofill is not working

Describe the bug
Value is not being set when auto set by browser, ie Chrome Autofill

To Reproduce
Steps to reproduce the behavior:

1. Have a country saved to auto fill
2. try to fill a form with country select
3. See it populate with your country, but not be set

Expected behavior
Either the component needs to respect autofill, and select a country if only one is found after the autofill. Or autofill should be disabled.

Screenshots
Result:

Expected Result:

Desktop (please complete the following information):

• OS: Ubuntu 2-
• Browser chrome
• Version 91.0.4472.114 (Official Build) (64-bit)

When rendering a default country (using alpha2Code), the flag shows up, but the country name doesn't. Is there any other way to achieve the same goal?

Describe the bug
When rendering a default country (using alpha2Code), the flag shows up, but the country name doesn't. Is there any other way to achieve the same goal?

To Reproduce
My code-

<mat-select-country
              appearance="outline"
              class="billing-field--dropdown"
              label="Country"
              country="{{subscription?.autofill ? autofill.billing_address.country : ''}}"
              [itemsLoadSize]="5"
              (onCountrySelected)="onCountrySelected($event)"
            >
</mat-select-country>

Expected behavior
When setting the default value using country=alpha2Code, both the country name and the country flag should show up.

Screenshots

Desktop (please complete the following information):

• Any browser/device

Smartphone (please complete the following information):

• Any device

error when using ng add

ng add @angular-material-extensions/select-country
Skipping installation: Package already installed
@angular-material-extensions/select-country version = 1.0.0
✅️ Added "@angular-material-extensions/select-country" into dependencies
✅️ Added "svg-country-flags" into dependencies
🔍 Installing packages...
✅️ "MatSelectCountryModule" is imported
🚫 Failed to add the icons "@angular-material-extensions/select-country" to assets
⠋ Installing packages.../Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/core/node_modules/rxjs/internal/util/hostReportError.js:4
setTimeout(function () { throw err; }, 0);
^

TypeError: entry.message.split is not a function
at MapSubscriber.project (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/core/src/logger/indent.js:34:58)
at MapSubscriber._next (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/map.js:49:35)
at MapSubscriber.Subscriber.next (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:66:18)
at Subject.next (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subject.js:60:25)
at IndentLogger.log (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/core/src/logger/logger.js:76:23)
at /Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-material-extensions/select-country/schematics/ng-add/index.js:94:28
at MergeMapSubscriber.project (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/src/rules/call.js:74:24)
at MergeMapSubscriber._tryNext (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
at MergeMapSubscriber._next (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
at MergeMapSubscriber.Subscriber.next (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:66:18)
at MergeMapSubscriber.notifyNext (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
at InnerSubscriber._next (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
at InnerSubscriber.Subscriber.next (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:66:18)
at Observable._subscribe (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/util/subscribeToArray.js:5:20)
at Observable._trySubscribe (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Observable.js:44:25)
at Observable.subscribe (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Observable.js:30:22)
at Object.subscribeToResult (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/util/subscribeToResult.js:12:23)
at MergeMapSubscriber._innerSub (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:82:29)
at MergeMapSubscriber._tryNext (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:76:14)
at MergeMapSubscriber._next (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
at MergeMapSubscriber.Subscriber.next (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:66:18)
at MergeMapSubscriber.notifyNext (/Users/borkur/Desktop/Forritun/vat-app-affiliate/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:92:26)

disabled attribute with a reactive form directive

Bug Report or Feature Request (mark with an x)

- [X ] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

Versions

Repro steps

Following the steps at https://angular-material-extensions.github.io/select-country/ for reactive form

The log given by the failure

There is a warning message in the console but the country drop down works as expected... My code is identical to the sample provided at https://angular-material-extensions.github.io/select-country/
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

Desired functionality

Mention any other details that might be useful

Not nullable

Here we should have } else if (this.nullable) {, right?

select-country/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts

Line 108 in 8c490dd

} else if (this.value) {

country phone prefixes in value object?

Describe the solution you'd like
Would be nice to have country phone prefixes in value objects.

Additional context
It will extend usability of component.

Default country doesn't work

Hi,

I'm trying to set the default country as such. But the field stays empty:
component.ts

this.currentCountry = {alpha2Code:'DE', alpha3Code:null, callingCode:null, name:null, numericCode:null};

component.html

<mat-select-country appearance="outline"
                          label="Country"
                          formControlName="country"
                          [value]="currentCountry"
                          (onCountrySelected)="onCountrySelected($event)">
            </mat-select-country>

output:

The documentation specified I should: pass an empty Country object with alpha2 code populated to do alpha2 lookup)

Any idea what is wrong with my code?

Btw. Im using the following versions:
angular 12
@angular-material-extensions/select-country": "^5.0.1"
"svg-country-flags": "^1.2.10"

Importing HttpClientModule in this extension breaks the http interceptions

Describe the bug
Select Country module is importing HttpClientModule. If it is already imported earlier for any reason (great chance, because it is widely used), all interceptors created for the initially created HttpClient instance (during the first import) are ignored, simply because they are part of the previously injected HttpClient instance (https://angular.io/guide/http#setup-installing-the-module).

To Reproduce
Steps to reproduce the behavior:

1. Import HttpClientModule in app.module.ts
2. Create http interceptor and log something in console to see how it really works.
3. Create some other module and component which uses HttpClient (the instance, injected in some component).
4. Make a form using Country Select component and do an http request upon form submition.
5. Interceptor will NOT log anything, because it is not triggered, because it is "hooked" to an HttpClient instance, not really injected in the "form" component.

Expected behavior
HttpClientModule must be imported once.

Error retrieving icons

I followed these steps to install

I got console issues as below

I am not sure why the flags svg folder were not loaded into assets. Please let me know where I am missing or is this a bug,

Error: Can't resolve all parameters for MatSelectCountryModule: (?, ?)

When starting application I receive the following error
Error: Can't resolve all parameters for MatSelectCountryModule: (?, ?)

My package.json
"dependencies": { "@angular-material-extensions/select-country": "^1.3.0", "@angular/animations": "^9.1.12", "@angular/cdk": "^9.2.4", "@angular/common": "^9.0.0", "@angular/compiler": "^9.0.0", "@angular/core": "^9.0.0", "@angular/flex-layout": "^10.0.0-beta.32", "@angular/forms": "^9.1.12", "@angular/material": "^9.2.4", "@angular/platform-browser": "^9.0.0", "@angular/platform-browser-dynamic": "^9.0.0", "@angular/platform-server": "^9.0.0", "@angular/router": "^9.0.0", "@nguniversal/module-map-ngfactory-loader": "^7.1.1", "bootstrap": "^4.1.3", "classlist.js": "^1.1.20150312", "core-js": "^3.6.5", "hammerjs": "^2.0.8", "jquery": "^3.5.1", "popper.js": "^1.14.3", "rxjs": "^6.6.0", "rxjs-compat": "^6.4.0", "svg-country-flags": "^1.2.7", "zone.js": "^0.10.3" },

Build one SVG sprite by CountryCode

Is your feature request related to a problem? Please describe.
each page load for a country select there are 100s of SVG requests, if a build step was added to create a single Sprite SVG, then these network calls could be avoided.

Describe the solution you'd like
As per: hampusborgos/country-flags#35

do something like mdi, where they allow a single svg file for all the icons. each flag will be identified by an ID tag

npm install -g svgexport imagemin-cli
npm run build-pngs -- 200 --combined=true:

Describe alternatives you've considered
Writing documentation outlining how to add particular build steps and programatic changes required to get the same result while the team works on an automated solution.

Additional context
https://github.com/svg-sprite/svg-sprite is another possibility to use.

Property 'forRoot' does not exist on type 'typeof MatSelectCountryModule'

I can't use the forRoot-method when importing the MatSelectCountryModule in my AppModule. I'm using Ivy & Angular 10.2.

[ANGULAR] ERROR in projects/projectname/src/app/app.module.ts:79:28 - error TS2339: Property 'forRoot' does not exist on type 'typeof MatSelectCountryModule'.
[ANGULAR] 
[ANGULAR] 79     MatSelectCountryModule.forRoot('de'),
[ANGULAR]                               ~~~~~~~

Missing documentation for using reactive form and validators

Hi,

How would this component work together with a reactive form. I want to mark the form as required if the field is left empty. Or be able to have the field always have a value.

Regards

SVG flags can't be retrieved

Describe the bug
Created a fresh Angular 9 project with material, getting following error for all flags
Error: Error retrieving icon :bl! <svg> tag not found

To Reproduce
Steps to reproduce the behavior:
Go to https://stackblitz.com/edit/angular-9-material-starter-4fd9kj?file=angular.json
I created a stackblitz where you can reproduce the issue. it's a clean Angular 9 installation with material

Expected behavior
For the flags to load

Possibility to reset field

Is your feature request related to a problem? Please describe.
In your demo I see there is no possibility to reset the field, if I select the country I see the flag in the field but if I cancel the country in the input the flag does not go away.

Describe the solution you'd like
An icon to reset the field or an event that reset the field when I cancel the input.

some flags are broken when selecting options

when selecting in the select the flag of Uruguay, the flags of Chile, Brazil and Venezuela. They look broken

How to increase Width

Hi , im new to angular and im really not sure if this could be achieved from angular material or if you can add a feature wich allows width modification . i tried everything but couldn't increase the width ,

not working on Angular 11.2.11

while running ->ng add @angular-material-extensions/select-country

npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/cdk
npm ERR! @angular/cdk@"^11.2.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/cdk@"~11.0.0" from @angular-material-extensions/[email protected]
npm ERR! node_modules/@angular-material-extensions/select-country

please resolve issue.

[Feat Request] Use different svg sources

Is your feature request related to a problem? Please describe.
The library uses svg-country-flags package to load the svg flags into the dropdown selector but not all the flags have the same ratio, which can be desired on some projects.

Describe the solution you'd like
Would be great to customise the package used for loading and/or rendering svgs on the selector. Some options are listed below:

• flag-icon-css which brings squared flags (1x1) and rectangle ones (4x3) while keeping the same size for all.
• twemoji which brings lightweight svg icons in exchange of details, which can be seen here.

Maybe as an alternative library but published with a suffix like @angular-material-extensions/select-country-twemoji?

Localization for other languages?

I've just found this project and I found it amazing!
However I'm wondering: is there any support for localization in other languages? Is this something achievable manually or planned?

Get an error when try to serve the project

Describe the bug
When trying to serve the app I get an injection error.

To Reproduce
Steps to reproduce the behavior:

1. Create a new angular app
2. Add angular/cdk and angular/material dependencies
3. Run "ng add @angular-material-extensions/select-country"
4. Run "npm start'
5. See error

Screenshots

Desktop:

• OS: Windows 10
• Browser Chrome
• Version 83.0.4103.116

Additionally:

• dependencies:
  

• changes applied after run "ng add @angular-material-extensions/select-country":
  angular.json
  

  app.module.ts
  

Was anyone facing this issue? What am I doing wrong?

Support for Angular 12

As our project is moving to angular 12 (which as released in may 2021) it would be nice if we could use select-country in this version too.

Is this already on the roadmap for the project?

Thanks!

NEW ERROR AFTER UPGRADE THIS MODULE TO LATEST VERSION ON ANGULAR 10.

Hi Anthony, awesome module many thanks. I upgraded Angular and Material to 10 and select country to 1.3.0
1)
Had this error : No suitable injection token for parameter 'iconRegistry' of
class 'MatSelectCountryModule'. no type or decorator - app not running, any guiding help well appreciated.

1.1) I added IconRegistry and sanitizer to constructor of
"node_modules@angular-material-extensions\select-country_ivy_ngcc_\fesm2015\angular-material-extensions-select-country.js"

ERROR 2 happened after doing so :

2. Cannot read property 'addSvgIcon' of undefined
   at MatSelectCountryModule.registerCountries
   2.2) WHen i comment out the code below in ivy file, app runs, doesnt show icons, i get why.
   Commented out code in "node_modules@angular-material-extensions\select-country_ivy_ngcc_\fesm2015\angular-material-extensions-select-country.js"
   CODE BELOW :
   this.iconRegistry.addSvgIcon(countryAlpha2Code, this.sanitizer.bypassSecurityTrustResourceUrl(assets/svg-country-flags/svg/${countryAlpha2Code}.svg));
   2.3) when i uncomment code the app doesnt run at all, and error 2 is shown in console.

MY DEV ENVIRONMENT IS :
Angular Version =
@angular-devkit/architect 0.1000.6
@angular-devkit/build-angular 0.1000.6
@angular-devkit/build-optimizer 0.1000.6
@angular-devkit/build-webpack 0.1000.6
@angular-devkit/core 10.0.6
@angular-devkit/schematics 10.0.6
@angular/cdk 10.1.3
@angular/cli 10.0.6
@angular/flex-layout 10.0.0-beta.32
@angular/material 10.1.3
@ngtools/webpack 10.0.6
@schematics/angular 10.0.6
@schematics/update 0.1000.6
rxjs 6.5.5
typescript 3.9.7
webpack 4.43.0

Node Version :
v12.18.3

// package,json below :

"name": "",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-material-extensions/select-country": "^1.3.0",
"@angular/animations": "^10.0.10",
"@angular/cdk": "^10.1.3",
"@angular/common": "^10.0.10",
"@angular/compiler": "^10.0.10",
"@angular/core": "^10.0.10",
"@angular/flex-layout": "^10.0.0-beta.32",
"@angular/forms": "^10.0.10",
"@angular/material": "^10.0.0-rc.3",
"@angular/platform-browser": "^10.0.10",
"@angular/platform-browser-dynamic": "^10.0.10",
"@angular/router": "^10.0.10",
"@material/icon-button": "^4.0.0",
"@ngu/carousel": "^1.5.5",
"@types/snapsvg": "^0.5.0",
"get-svg-colors": "^1.5.1",
"jw-angular-pagination": "^1.2.0",
"ng-inline-svg": "^9.2.2",
"ng-starrating": "^1.0.20",
"ng2-search-filter": "^0.5.1",
"ngx-pagination": "^5.0.0",
"rxjs": "~6.5.5",
"snapsvg": "^0.5.1",
"svg-country-flags": "^1.2.7",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1000.6",
"@angular/cli": "^10.0.6",
"@angular/compiler-cli": "^10.0.10",
"@angular/language-service": "^10.0.10",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.12.54",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^5.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "^6.1.3",
"typescript": "^3.9.7"
}
}

angular.json below :

 "assets": [
          "src/favicon.ico",
          "src/assets",
          {
            "glob": "**/*",
            "input": "node_modules/svg-country-flags/svg",
            "output": "assets/svg-country-flags/svg"
          }
        ],
        "styles": [
          "./node_module

Originally posted by @impimediavillage in #24 (comment)