country-region-city-selector
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.5 • Public • Published

    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>
    

    Install

    npm i country-region-city-selector

    DownloadsWeekly Downloads

    48

    Version

    1.5.5

    License

    ISC

    Unpacked Size

    203 kB

    Total Files

    22

    Last publish

    Collaborators

    • wavecoders