Ionic4CityPicker

Ionic4 City Picker--An Ionic4 Custom Picker Component

**For ionic 2.x or 3.x, please use ionic2-city-picker

Github: ionic2-city-picker

Preview

Picker with Independent/ Dependent Columns

PickerController doesn't show correctly

If you project have this happens,you need:

a)ionic version <= 4.4.2

1.download ionic core(ionic);

2.modify picker-column.tsx file(just here);

3.npm run build ionic/core;

4.copy dist folder file to node_modules\@ionic\core,overlay folder.

b)4.4.2 < ionic version <= 4.11.5

1.modify ion-datetime_3-ios.entry.js and ion-datetime_3-md.entry.js(just here)

2.js file path node_modules\@ionic\core\dist\esm;

Installation

npm install ionic4-city-picker --save

Json Data

https://github.com/zwlccc/ionic4-city-picker/blob/master/data/city-data.json

Usage

Basic

1.Import IonCityPickerModule And Provide DataService to your app/module.

import { IonCityPickerModule } from 'ionic4-city-picker';
import { DataService } from './services/data.service';
 
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    HttpClientModule,
    AppRoutingModule,
    IonCityPickerModule //Import IonCityPickerModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    DataService, //Provide the DataService
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

2.Create the Services.

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
 
@Injectable()
export class DataService {
  constructor(public http: HttpClient) {
  }
 
  geCityData(): Observable<any> {
    return this.http.get('./assets/data/city-data.json', {withCredentials: false})
      .pipe(
        tap( data => data),
        catchError(this.handleError)
      );
  }
 
  private handleError (error: Response | any) {
    let errMsg: string;
    if (!error.ok) {
        errMsg = "Can't connect to server. Please try again later.";
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    return Promise.reject(errMsg);
  }
 
}

3.Initialize View Controller.

import { Component } from '@angular/core';
import { DataService } from '../services/data.service';
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  cityData: any[] = [];
 
  constructor(
    private ds: DataService
  ) {
    
  }
 
  ngOnInit() {
    this.ds.geCityData().subscribe(res => {
      this.cityData = res;
    },
    error => {
      console.log(error);
    });
  }
 
  onCityChange(e){
    const cityvalue = e.getValue();  //get city value
  }
}

4.Add ion-multi-picker to your html template.

    <ion-item>
        <ionic4-city-picker [citiesData]="cityData" (ionChange)=onCityChange($event)></ionic4-city-picker>
    </ion-item>

Set disabled to true to prevent interaction.

    <ion-item>
        <ionic4-city-picker [citiesData]="cityData" [disabled]="true" (ionChange)=onCityChange($event)></ionic4-city-picker>
    </ion-item>

Attributes

Attribute	Description	Type	Options	Default
cancelText	The text to display on the picker's cancel button.	string	-	'Cancel'
disabled	If true, the user cannot interact with the city.	boolean \| undefined	-	false
doneText	The text to display on the picker's "Done" button.	string	-	'Done'
mode	The mode determines which platform styles to use.	"ios" \| "md"	-	undefined
name	The name of the control, which is submitted with the form data.	String	-	this.inputId
placeholder	The text to display when there's no city selected yet. Using lowercase to match the input attribute	string	-	null \| string \| undefined
readonly	If true, the city appears normal but is not interactive.	boolean	-	false
value	The value of the city string.	null \| string \| undefined	-	string
citiesData	Required,configure multi picker columns	CityPickerColumn	-	[]
separator	Optional, charactor to separate value from each column	string	-	'-'

Events

Event	Description	Type
ionCancel	Emitted when the city selection was cancelled.	CustomEvent<void>
ionChange	Emitted when the value (selected city) has changed.	CustomEvent<void>

Contribution

Welcome issue report, PR and contributors. Help me improve it.

License

MIT

Change Log

Change log is here