country-region-city-selector v1.5.5

CountryRegion-City-Selector

This Angular component (Module) allows you to select the country, region and city. This has been supported for US and Canada. This component may validate the city selected from both country and region. You may overide the city from a dropdown to an autocomplete allwoing the user to enter the city if not in the current supported list.

This component is supported on both large and small screens.

Location information may also be found and selected by providing a zip/postal code as an input Also if a location has been selected (Country, Region, City) an event emitter will provide all zip/postal codes available for that selected location.

There are 2 external files (database of countries, regions and cities) that need to be copied to the assets folder and then provided as an array to the component so it knows what to import.

This means you can extend the countries by creating your own database (csv) file to be added for your project.

Installation

npm install country-region-city-selector

Scaffolding

Import the module into your project under imports

imports: [
  BrowserModule,
  AppRoutingModule,
  CountryRegionCitySelectorModule
]

Use

First create a formControl defining the country, region and city If you only want the country or country and region only, then do not include it in your form

countrySelection = this.fb.group({
  country: [null],
  region: [null],
  city: [null]
})

You have to specify the data files

countries: CountryDataFile[] = [
  { name: 'Canada', file: 'assets/data/canada.csv'},
  { name: 'United States', file: 'assets/data/united-states.csv' }
]

In your component, use the following tag

<div style="margin: 24px;" [formGroup]="selection">
  <div [formGroup]="countrySelection">
    <wav-country-region-city-selector
      [dataCountryFiles]="countries"
    ></wav-country-region-city-selector>
  </div>
</div>

if you do not want to use it as a formControl then the implementation looks like this

<div style="margin: 24px;">
  <div>
    <app-country-region-city-selector
      [autocomplete]="true"
      [dataCountryFiles]="countries"
      [acceptInput]="true"
      (onChanged)="changedSelection($event)"
    ></app-country-region-city-selector>
  </div>
</div>

The (onChanged)="" event will respond with the selection for Country, Region, City and Postal/Zip Code

Inputs

The following Inputs are available

Outputs

The following Outputs available

Sample Implementation

<div style="margin: 24px;">
  <div [formGroup]="countrySelection">
    <wav-country-region-city-selector
      [dataCountryFiles]="countries"
    ></wav-country-region-city-selector>
  </div>
</div>

Input return

You will note that the control will only return only if country, region and city controls are defined in the form object

{
  "country": "Canada",
  "region": "Ontario",
  "city": "Toronto"
}

Below is a sample of the implementation

  countries: CountryDataFile[] = [
    { name: 'Canada', file: 'assets/data/canada.csv'},
    { name: 'United States', file: 'assets/data/united-states.csv' }
  ]
  countrySelection = this.fb.group({
      country: [null],
      region: [null],
      city: [null]
  })

  zip = 'L4T-2V6'

ngOnInit() {

  this.countrySelection.valueChanges.subscribe(data => {
    console.log('data', data)
  })

}

onPostalZipCodes(event: string[]) {
  console.log(event)
}

HTML setup for component with inputs and outputs

<div style="margin: 24px;" [formGroup]="selection">
  <div [formGroup]="countrySelection">
    <wav-country-region-city-selector
      [autocomplete]="true"
      [dataCountryFiles]="countries"
      [acceptInput]="true"
      [postalZip]="zip"
      (postalZipCodes)="postalZipCodes($event)"
    ></wav-country-region-city-selector>
  </div>
</div>