Modal Select Dropdown in Ionic

Ionic Framework ionic-v3
1

I need help using Modal Select Dropdown in Ionic 2
The following plugin


works fine for ionic 1 but i need similar modal select to use in my project in Ionic 2.

Anyone please help or suggest me similar kind of plugin.

Thank you

2

This sort of functionality is built in to ionic 2 now. With modals and checkboxes, you can create something similar.

1 Like
3

Thank you for your response :smiley:

Do you have any reference link or tutorial?
Because I am new to Ionic.

Thank you

4

I would use alerts and checkboxes --> see an example here:
http://ionicframework.com/docs/v2/api/components/alert/Alert/

5

Yeah thats fine, but i wanted a drop select with search bar with json value in select option that pops option name with some details in it.
I need exactly the same as this (link below)
https://github.com/inmagik/ionic-modal-select10

Is there any best way to do that?

Thanks

6

I have combined ionic2 searchbar component with simple ion checkbox with bind checked property as follows, altogether added to modal page. So similiar to what has been suggested.

<ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event)" placeholder="Filter by text"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of items">
    <ion-label>{{item.name}}</ion-label>
    <ion-checkbox [checked]="item.id === selected.id" (click)="select(item)"></ion-checkbox>
  </ion-item>
</ion-list>
7

alertOptions - cssClass on ion-select is not working … Do you have any suggestions why it is not working ?
As we need to add a class to the select alert to support rtl ?

8

@pradhan007p Were you able to find some way to put searchbar in dropdown list ?

9

if your still struggling with this please let me know

10

I’m quite new to the ionic2. Can you please tell me how to implement a modal select dropdown in ionic2 ?
Will that help me select an item from the list and display the selected item in the searchbar ?

11

Here is a complete modal select for Ionic 2:

TS:

import { Component } from '@angular/core';
import { ViewController, NavParams, Platform } from 'ionic-angular';

/*
  Generated class for the TestEntrySettings page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'modal-select',
  templateUrl: 'modal-select.html'
})
export class ModalSelectPage {

  items: any[];
  displayProperty: string;
  title: string;
  selectedItem: any;
  searchQuery: string;

  constructor(public navCtrl: ViewController, public navParams: NavParams, platform: Platform) {
    this.initializeItems();
    this.displayProperty = navParams.get('displayProperty');
    this.title = navParams.get('title');
    if(!this.title) this.title = 'Select...';
    

    platform.registerBackButtonAction(() => {
      this.dismiss();
    });
  }

  initializeItems() {
    this.items = this.navParams.get('items');
  }

   getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item[this.displayProperty].toLowerCase().indexOf(val.toLowerCase()) > -1);
      });
    }
  }


  dismiss() {
    this.navCtrl.dismiss(this.selectedItem);
  }

  select(i)
  {
    this.selectedItem = i;
  }


}

HTML:

<ion-header>
  <ion-toolbar>
    <ion-title>
      {{ title }}
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span ion-text color="primary" showWhen="ios">Save</span>
        <ion-icon name="checkmark" showWhen="android,windows,core,mobileweb"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>

  <ion-searchbar (ionInput)="getItems($event)" placeholder="Search..."></ion-searchbar>
  <ion-list radio-group>
    <ion-item *ngFor="let item of items">
      <ion-label>{{item[displayProperty]}}</ion-label>
      <ion-radio [checked]="item === selectedItem" (click)="select(item)"></ion-radio>
    </ion-item>
  </ion-list>

</ion-content>
12

Finally you achieve this? You have any code or codepen to see how can i do this? Thanks

13

Hi,
Could you please share the code or codepen of the implementation ?

14

Finally i get it with Ionic Modals… it’s easy

15

when i m going to search giving me error