ac

angular2-countrypicker

Configurable Angular 2 Country Picker dropdown list (select list)

Showing:

Popularity

Downloads/wk

1

GitHub Stars

0

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

angular2-countrypicker

Angular 2 Country Picker - Country selector with Bootstrap support by default, but can be used with any other UI framework (e.g. Ionic or Angular Material)

Build Status npm

Credits

Thanks mledoze's country collection and Open Data Commons for country database.

Installation

To install this library, run:

$ npm install angular2-countrypicker --save

Then add CountryPickerModule import to your @NgModule in your Angular AppModule:

// Import angular2-countrypicker library
import { CountryPickerModule } from 'angular2-countrypicker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify angular2-countrypicker library as an import
    CountryPickerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Don't forget to add static countries.json and flag svg assets from mledoze's country collection. Using angular-cli, static asset import is not yet supported (https://github.com/angular/angular-cli/issues/3555), so please put required data into assets folder like the example in the sample folder. You can also specify the location of the assets:


  imports: [
    CountryPickerModule.forRoot({
      baseUrl: 'assets/'
    })
  ]

Usage

Once your library is imported, you can use its components, directives and pipes in your Angular application:

  <!-- You can now use your angular2-countrypicker -->
  <countryPicker></countryPicker>
  <!-- You can also configure picker -->
  <countryPicker [setName]="cca3" [setValue]="ccn2" [flag]="true"></countryPicker>

Alternatively you can CountryPickerService to get details for each country.


  public countries: any[];

  constructor(private countryPickerService: CountryPickerService) {
    this.countryPickerService.getCountries().subscribe(countries => this.countries = countries);
  }

  <md-select name="countrypicker">
    <md-option *ngFor="let c of countries">{{c.capital}}</md-option>
  </md-select>

Parameters

Component configuration

You can configure component with the following input attributes:

  • setName: string - visible name in the country picker
  • setValue: string - value to set when an item is selected
  • flag: boolean - show flags

Country model

Example JSON of country models.

{
   "name":{
      "common":"Hungary",
      "official":"Hungary",
      "native":{
         "hun":{
            "official":"Magyarország",
            "common":"Magyarország"
         }
      }
   },
   "tld":[
      ".hu"
   ],
   "cca2":"HU",
   "ccn3":"348",
   "cca3":"HUN",
   "cioc":"HUN",
   "currency":[
      "HUF"
   ],
   "callingCode":[
      "36"
   ],
   "capital":"Budapest",
   "altSpellings":[
      "HU"
   ],
   "region":"Europe",
   "subregion":"Eastern Europe",
   "languages":{
      "hun":"Hungarian"
   },
   "translations":{
      "deu":{
         "official":"Ungarn",
         "common":"Ungarn"
      },
      "fra":{
         "official":"Hongrie",
         "common":"Hongrie"
      },
      "hrv":{
         "official":"Madžarska",
         "common":"Mađarska"
      },
      "ita":{
         "official":"Ungheria",
         "common":"Ungheria"
      },
      "jpn":{
         "official":"ハンガリー",
         "common":"ハンガリー"
      },
      "nld":{
         "official":"Hongarije",
         "common":"Hongarije"
      },
      "por":{
         "official":"Hungria",
         "common":"Hungria"
      },
      "rus":{
         "official":"Венгрия",
         "common":"Венгрия"
      },
      "slk":{
         "official":"Maďarsko",
         "common":"Maďarsko"
      },
      "spa":{
         "official":"Hungría",
         "common":"Hungría"
      },
      "fin":{
         "official":"Unkari",
         "common":"Unkari"
      },
      "zho":{
         "official":"匈牙利",
         "common":"匈牙利"
      }
   },
   "latlng":[
      47,
      20
   ],
   "demonym":"Hungarian",
   "landlocked":true,
   "borders":[
      "AUT",
      "HRV",
      "ROU",
      "SRB",
      "SVK",
      "SVN",
      "UKR"
   ],
   "area":93028
}

Demo

You can check example usage and online demo here.

Development

To generate all *.js, *.js.map and *.d.ts files:

$ npm run tsc

To lint all *.ts files:

$ npm run lint

License

MIT © Domonkos Pal

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial