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

View Code? Open in Web Editor NEW

9.0 3.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%

country-picker angular angular4 angular6 angular7 angular8

ngx-country-picker's People

Contributors

Stargazers

Watchers

Forkers

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

ngx-country-picker's Issues

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>

Angular 5.X compatibility

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

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!

CountryPickerService

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

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)

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.

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

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```

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)

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...

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() ],

<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>

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,