Ngx-country-picker NPM

ngx-country-picker

This Angular module provides a service and a component to show a country picker with localizable names, inspired by Paldom/angular2-countrypicker

Installation

To install this library, run:

$ npm install ngx-country-picker --save

or with Yarn :

$ yarn add ngx-country-picker

Consuming the Country Picker

Add the CountryPickerModule to your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { CountryPickerModule } from 'ngx-country-picker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Import here
    CountryPickerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once CountryPicker is imported, you can use the component in your Angular application:

<!-- You can now use the CountryPickerComponent in app.component.html -->
<h1>
  {{title}}
</h1>
<country-picker [flag]="false" [setValue]="'cca3'" [setName]="'name.common'" [classes]="['form-control']"></country-picker>

You can also use the CountryPickerService to import the list of countries in your app:

export class YourComponent {

  public countries: ICountry[] = [];

  ...

  constructor(protected countryPicker: CountryPickerService) {

  }

  ...

  public ngOnInit(): void {
    this.countryPicker.getCountries()
      .subscribe((countries: ICountry[]) => this.countries = countries);
  }

  ...
}