ionic-selectable

Ionic Selectable

An Ionic component similar to Ionic Select, that allows to search items, including async search, infinite scrolling and more.

Contents

• Demo
• Getting started
• FAQ
• Documentation
• Theming
• Version comparison

Getting started

1. Decide on the version you want to use Free or Pro. See Version comparison to help you choose.

2. Install it.

Ionic Selectable Free

npm install ionic-selectable --save

Ionic Selectable Pro

Purchase it from Ionic Market.
Copy ionic-selectable-3.0.1.tgz archive to the root of your project. Then cd to the project root and install the package.

npm install ionic-selectable-3.0.1.tgz

1. Import it.

import { IonicSelectableModule } from 'ionic-selectable';

@NgModule({
    imports: [
        IonicSelectableModule
    ]
})
export class AppModule { }

1. Add it to template.

<ion-item>
    <ion-label>Port</ion-label>
    <ionic-selectable
        item-content
        [(ngModel)]="port"
        [items]="ports"
        itemValueField="id"
        itemTextField="name"
        [canSearch]="true"
        (onChange)="portChange($event)">
    </ionic-selectable>
</ion-item>

1. Configure it.

import { IonicSelectableComponent } from 'ionic-selectable';

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,
        value: any 
    }) {
        console.log('port:', event.value);
    }
}

1. Enjoy it 😉
2. Check out live demos to see what Ionic Selectable is capable of.
   Also, explore the docs and FAQ to learn more about its features.

Version comparison

Ionic Selectable Free	Ionic Selectable Pro
Single item selection	Single item selection
Multiple item selection	Multiple item selection
Search items	Search items
Search items asynchronously	Search items asynchronously
Angular Forms integration	Angular Forms integration
Validation	Validation
Ionic InfiniteScroll	Ionic InfiniteScroll
Ionic VirtualScroll	Ionic VirtualScroll
	Templates
	Grouping items
	Editing, adding and deleting items
	Disabling items

Share it

If you find this component useful, please star the repo to let others know that it's reliable. Also, share it with friends and colleagues who might find it useful as well. Thank you 😄