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

Input	Type	Defaut	Description
dataCountryFiles	CountryDataFile[]	[ ]	list of countries and data
omnitFirstLineInDataFile	BOOLEAN	TRUE	remove header (1st line) for data file selection
postalZip	STRING	''	Specify the postal/zip code and location will be set for country, region and city
placeholder	STRING	'New York'	Label for placeholder (autocomplete input)
autocomplete	BOOLEAN	''	autocomplete entry with list
acceptInput	BOOLEAN	''	Allow for custom entry and return value
required	BOOLEAN	''	adds required validator
style	STRING	''	styles to apply to formfield/select
maxLen	NUMBER	NULL	input max for city entry
Appearence	STRING	NULL	input style
disableCitySelector	BOOLEAN	fALSE	removes city selector
disableRegionSelector	BOOLEAN	fALSE	removes region and city selectors
countryLabel	STRING	Country	Label for Country selector
RegionLabel	STRING	Region	Label for Region selector
CityLabel	STRING	City	Label for City selector

Outputs

The following Outputs available

Input	Type	Defaut	Description
zipPostalCodes	STRING[]	[]	events of all zip/postal codes on changed
onChanged	CountryRegionCityCodes	Object	returns the selected Country, Region, City and all Postal/Zip Codes for the ciyt

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>