Greetings :)

Greetings!

As an ongoing project, I would like to inform you that this platform is currently in the beta phase. I have been actively testing and refining it since its migration to a newer stack.

Should you encounter any bugs, require assistance, or wish to provide feedback, please do not hesitate to reach out to me. Furthermore, if you would like to contribute, I would be grateful for any pull requests you may submit.

In addition, I would like to inform you that I will be addressing any previously reported issues from the migrated project.

Thank you for your understanding and support in the development of this package.

Installation

Install Package

npm install [email protected] --save

Supported Ionic languages

• Angular Support

Supported Ionic versions

• Ionic 7 (>=7.0.0)

An Ionic component similar to ion-select, that allows to search items, including async search, infinite scrolling and more. Ionic-pick strictly support ionic 7+. Testing below 7 has not been done. If you need to support a lower version, you must use Ionic-Selectable where this package originally derived from.

Contents (referenced to Ionic-Selectable)

• Demo

• Features

• Getting started

• Supported Ionic versions

• FAQ

• Docs

• Theming

Features (referenced to Ionic-Selectable)

• Single selection

• Multiple selection

• Search items

• Search items asynchronously

• Search by several item fields

• Forms

• InfiniteScroll

• VirtualScroll

• Templates

• Grouping items

• Editing, adding and deleting items

• Disabling items

Getting started (referenced to Ionic-Selectable)

1. Install it.

Ionic 3

npm install [email protected] --save

Ionic 4 - Ionic 6

npm install [email protected] --save

Ionic 7+

npm install [email protected] --save

2. Import it.

• (Ionic 3-6) First, import IonicSelectableModule to your app.module.ts that is normally located in src\app\app.module.ts.

• (Ionic 7+) First, import IonicPickAngularModule to your app.module.ts that is normally located in src\app\app.module.ts.

import { IonicSelectableModule } from 'ionic-selectable'; //Ionic 3-6

import { IonicPickAngularModule } from 'ionic-pick'; //Ionic 7+



@NgModule({



imports: [



IonicSelectableModule //Ionic 3-6

IonicPickAngularModule //Ionic 7+

]



})



export class AppModule { }

Note: Additionally, if you use Ionic 3+ you might be as well using lazy loaded pages. Check if your pages have a module file, for example, home.module.ts, and if they do then import IonicSelectableModule to each page module too.

import { IonicSelectableModule } from 'ionic-selectable'; //Ionic 3-6

import { IonicPickAngularModule } from 'ionic-pick'; //Ionic 7+



import { HomePage } from './home';





@NgModule({



declarations: [



HomePage



],



imports: [



IonicPageModule.forChild(HomePage),



IonicSelectableModule //Ionic 3-6

IonicPickAngularModule //Ionic 7+



]



})



export class HomePageModule { }

3. Add it to template.

<ion-item>



<ion-label>Port</ion-label>

<!--Ionic 3-6-->

<ionic-selectable



item-content // Required for Ionic 3 only.



[(ngModel)]="port"



[items]="ports"



itemValueField="id"



itemTextField="name"



[canSearch]="true"



(onChange)="portChange($event)">



</ionic-selectable>



<!--Ionic 7+-->

<ionic-pick



item-content // Required for Ionic 3 only.



[(ngModel)]="port"



[items]="ports"



itemValueField="id"



itemTextField="name"



[canSearch]="true"



(onChange)="portChange($event)">



</ionic-pick>



</ion-item>

4. Configure it.

import { IonicSelectableComponent } from 'ionic-selectable'; //Ionic 3-6

import { IonicPickComponent } from 'ionic-pick'; //Ionic 7+



class Port {



public id: number;



public name: string;



}





@Component({ ... })



export class HomePage {



ports: Port[];



port: Port;





constructor() {



this.ports = [



{ id: 1, name: 'Tokai' },



{ id: 2, name: 'Vladivostok' },



{ id: 3, name: 'Navlakhi' }



];



}





portChange(event: {



component: IonicSelectableComponent, //Ionic 3-6

component: IonicPickAngularModule , //Ionic 7+

value: any



}) {



console.log('port:', event.value);



}



}

Sponsor creator of derived ionic-selectable package here