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 ionic-pick@1.1.2 --saveSupported 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)
Features (referenced to Ionic-Selectable)
Getting started (referenced to Ionic-Selectable)
- Install it.
Ionic 3
npm install ionic-selectable@3.5.0 --save
Ionic 4 - Ionic 6
npm install ionic-selectable@4.8.0 --save
Ionic 7+
npm install ionic-pick@1.1.2 --save
- Import it.
-
(Ionic 3-6) First, import
IonicSelectableModuleto yourapp.module.tsthat is normally located insrc\app\app.module.ts. -
(Ionic 7+) First, import
IonicPickAngularModuleto yourapp.module.tsthat is normally located insrc\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 { }
- 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>
- 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);
}
}