guillaume-ro-fr / ngx-country-picker Goto Github PK

View Code? Open in Web Editor NEW

9.0 9.0 7.0 3.34 MB

This Angular module provides a service and a component to show a country picker with localizable names.

License: MIT License

TypeScript 100.00%

angular angular4 angular6 angular7 angular8 country-picker

ngx-country-picker's People

Contributors

Stargazers

Watchers

Forkers

johan-- fossabot twindual iwe7 prog-24 jeongjun-lee kizaruuu

ngx-country-picker's Issues

How do you bind it to a model?

Maybe I'm stupid, or maybe I'm missing something, or maybe there's not a single example on the internet of this being bound to a model or passing its value anywhere.

What is the preferred way to bind this? Thanks.

CountryPickerService

There seems to be required use of a CountryPickerService but I cannot find anything in the docs for it?

Remove git dependency

Hello,

I noticed there is a git based dependency for "world-countries" in package.json.

I think it could simply be replaced by the npm one:
https://www.npmjs.com/package/world-countries

Best regards,

Cannot read property 'kind' of undefined in angular 8.2.14

I updated my dependencies yesterday, and when building --prod, it throws the following error:

ERROR in ./node_modules/ngx-country-picker/fesm2015/ngx-country-picker.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 (/Users/manolo/Documents/Dev/work/rec/rec-admin-ngcli/rec-admin/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:265:35)

This started happening with Angular v8.2.14 and ngx-country-picker v2.2.0
This did not happen with Angular v8.1.3

Going back to ngx-country-picker v2.1.0 fixes the issue, though...

Template parse errors when using the module in Ionic 3

I followed your guide and how to use the module and ran into above error when trying to use the module in Ionic 3.

ionic info
cli packages: (~/.nvm/versions/node/v8.9.1/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 
Gulp CLI              : CLI version 3.9.1 Local version 3.9.1

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.7.0

System:

Android SDK Tools : 26.1.1
Node              : v8.9.1
npm               : 5.6.0 
OS                : Linux 4.13

Environment Variables:

ANDROID_HOME : /home/kenny/Android/Sdk

Misc:

backend : legacy

Error console

ERROR 
Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'flag' since it isn't a known property of 'country-picker'.
1. If 'country-picker' is an Angular component and it has 'flag' input, then verify that it is part of this module.
2. If 'country-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("on-item>
        <ion-label stacked>{{ 'COUNTRY' | translate }}</ion-label>
        <country-picker [ERROR ->][flag]="false" [setValue]="cca3" [setName]="name.common"></country-picker>
      </ion-item>

"): ng:///SignupPageModule/SignupPage.html@53:24
Can't bind to 'setValue' since it isn't a known property of 'country-picker'.
1. If 'country-picker' is an Angular component and it has 'setValue' input, then verify that it is part of this module.
2. If 'country-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("  <ion-label stacked>{{ 'COUNTRY' | translate }}</ion-label>
        <country-picker [flag]="false" [ERROR ->][setValue]="cca3" [setName]="name.common"></country-picker>
      </ion-item>

"): ng:///SignupPageModule/SignupPage.html@53:39
Can't bind to 'setName' since it isn't a known property of 'country-picker'.
1. If 'country-picker' is an Angular component and it has 'setName' input, then verify that it is part of this module.
2. If 'country-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ed>{{ 'COUNTRY' | translate }}</ion-label>
        <country-picker [flag]="false" [setValue]="cca3" [ERROR ->][setName]="name.common"></country-picker>
      </ion-item>

"): ng:///SignupPageModule/SignupPage.html@53:57
'country-picker' is not a known element:
1. If 'country-picker' is an Angular component, then verify that it is part of this module.
2. If 'country-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      <ion-item>
        <ion-label stacked>{{ 'COUNTRY' | translate }}</ion-label>
        [ERROR ->]<country-picker [flag]="false" [setValue]="cca3" [setName]="name.common"></country-picker>
      </io"): ng:///SignupPageModule/SignupPage.html@53:8
syntaxError@http://localhost:8100/build/vendor.js:90981:34
TemplateParser.prototype.parse@http://localhost:8100/build/vendor.js:102219:19
JitCompiler.prototype._compileTemplate@http://localhost:8100/build/vendor.js:116413:18
JitCompiler.prototype._compileComponents/<@http://localhost:8100/build/vendor.js:116332:56
JitCompiler.prototype._compileComponents@http://localhost:8100/build/vendor.js:116332:9
JitCompiler.prototype._compileModuleAndComponents/<@http://localhost:8100/build/vendor.js:116219:13
then@http://localhost:8100/build/vendor.js:90970:133
JitCompiler.prototype._compileModuleAndComponents@http://localhost:8100/build/vendor.js:116218:16
JitCompiler.prototype.compileModuleAsync@http://localhost:8100/build/vendor.js:116147:32
ModuleBoundCompiler.prototype.compileModuleAsync@http://localhost:8100/build/vendor.js:116547:16
loadAndCompile/<@http://localhost:8100/build/vendor.js:77596:16
l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:13977
onInvoke@http://localhost:8100/build/vendor.js:4510:24
l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:13904
c</r.prototype.run@http://localhost:8100/build/polyfills.js:3:9127
f/<@http://localhost:8100/build/polyfills.js:3:18748
l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:14652
onInvokeTask@http://localhost:8100/build/vendor.js:4501:24
l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:14565
c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:9818
o@http://localhost:8100/build/polyfills.js:3:6890
h</e.invokeTask@http://localhost:8100/build/polyfills.js:3:15826
p@http://localhost:8100/build/polyfills.js:2:26982
v@http://localhost:8100/build/polyfills.js:2:27202

Stack trace:
c@http://localhost:8100/build/polyfills.js:3:18260
c@http://localhost:8100/build/polyfills.js:3:17969
f/<@http://localhost:8100/build/polyfills.js:3:18741
l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:14652
onInvokeTask@http://localhost:8100/build/vendor.js:4501:24
l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:14565
c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:9818
o@http://localhost:8100/build/polyfills.js:3:6890
h</e.invokeTask@http://localhost:8100/build/polyfills.js:3:15826
p@http://localhost:8100/build/polyfills.js:2:26982
v@http://localhost:8100/build/polyfills.js:2:27202

Tried exactly the same as in README but always getting this countries.map is not a function

Tried exactly the same as in README but always getting this

core.js:6014 ERROR TypeError: countries.map is not a function
at MapSubscriber.project (ngx-country-picker.js:44)
at MapSubscriber._next (map.js:29)
at MapSubscriber.next (Subscriber.js:49)
at CatchSubscriber._next (Subscriber.js:72)
at CatchSubscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)
at MapSubscriber.next (Subscriber.js:49)
at FilterSubscriber._next (filter.js:33)
at FilterSubscriber.next (Subscriber.js:49)
at MergeMapSubscriber.notifyNext (mergeMap.js:69)

Angular 5.X compatibility

Remove OpaqueToken
Migrate @angular/http to @angular/common/http
Check the dependencies

Compile error at Angular 9

error NG6005: CountryPickerModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type.

I know this component is not ready for Angular 9, but it's just notification.

Including <country-picker> in Angular 7.2.0 app results in error

core.js:15723 ERROR TypeError: rxjs__WEBPACK_IMPORTED_MODULE_3__.Observable.throw is not a function at CatchSubscriber.push../node_modules/ngx-country-picker/index.js.CountryPickerService.handleError [as selector] (index.js:46) at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js:18) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59) at XMLHttpRequest.onLoad (http.js:1638)

Angular 9.x compatibility

I'm getting this error:

ERROR in ../node_modules/ngx-country-picker/country-picker.module.d.ts:7:59 - error TS-996005: CountryPickerModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

Environment:

Node: 13.3.0
OS: darwin x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.6
@angular-devkit/build-angular     0.900.0-rc.6
@angular-devkit/build-optimizer   0.900.0-rc.6
@angular-devkit/build-webpack     0.900.0-rc.6
@angular-devkit/core              9.0.0-rc.6
@angular-devkit/schematics        9.0.0-rc.6
@angular/cdk                      9.0.0-rc.5
@angular/localize                 9.0.0-rc.0
@ngtools/webpack                  9.0.0-rc.6
@schematics/angular               9.0.0-rc.6
@schematics/update                0.900.0-rc.6
rxjs                              7.0.0-alpha.0
typescript                        3.6.4
webpack                           4.41.2```

<country-picker> wouldn't show when it's below <ion-label>

As mentioned in the title, <country-picker> wouldn't show when it's below <ion-label>

ERROR TypeError: Cannot read property 'common' of undefined

Hi,

I tried to use the ngx-country-picker, i follow the instruction but i when i run in my project the data not charge.
I think the problem is that it does not load the information from the countries.json, but if I load it by parameters the problem persists.

CountryPickerModule.forRoot({ baseUrl: 'assets/', filename: 'countries.json' })

html
<ion-item> <ion-label>País</ion-label> <country-picker [flag]="false" [setValue]="cca3" [setName]="name.common"></country-picker> </ion-item>

app.module.ts
imports: [ BrowserModule, IonicModule.forRoot(MyApp), AngularFireModule.initializeApp(environment.firebase), AngularFirestoreModule.enablePersistence(), AngularFireAuthModule, CountryPickerModule.forRoot() ],

Angular 8.x compatibility

The library seems to be working even with Angular 8.1.x, but I'll receive the following npm warnings:
npm WARN [email protected] requires a peer of @angular/common@>=6.0.0 <8.0.0 but none is installed. You must install peer dependencies yourself.

Support Angular 13

Are you planning to support Angular 13 on this lib?

Demo?

I'm tempted to try this project but there's no demo available, neither the inspiration source has demo available. So, I don't want to spend 30m-2h maybe trying to get this to work just to realize that I don't like the UI for example. A demo would be great. Thanks!

didn't show the flag

Hello, i've setup data and picker correctly... (and i've download Data folder into base directory with all the SVG of flag) i can see the list of country, but no icons flag appear on the drop down menu... have someone used this "flag" ??

<country-picker [flag]="true" [setValue]="'native'" [setName]="'name.common'" [classes]="['form-control']"></country-picker>