How to provide double click callback on ion-select?

I have a ion-select list. Now, when i select an option, i am triggering one callback using (ionSelect). But i want to trigger another callback when user double clicks on an option. My code is:

 <ion-select interface="popover" >
            <ion-option *ngFor="let item of macroList" [value]="item.MacroName"

Is there any way to distinguish click and double click event in ion-select? Is it possible to do that?

I don’t know an easy way of doing it. You could create a custom component with something like this:

<button ion-item (click)="openPopover($event)">
  <ion-label>Please select</ion-label>
  <ion-icon name="md-arrow-dropdown" item-end style="color: gray;"></ion-icon>

Then you open a custom popover where you implement the logic for the click and double click events. Should not be that hard to implement.

Can i implement gestures like tap or press in ion-select?

ion-select works with popover but allows only to adjust option value, checked and disabled. You find the code here:

Looks like you have to implement your own select component.

Check the ionic preview app on github for inplementation of these gestures

Double tap is more difficult and will require a homebrew solution measuring time difference between two taps/selects.

Many different inplementations in plain vanilla js or libraries can be found via google

i use (dblTap) for the double click. on the ‘row’ of the select, and (click) on the column

<ion-row  *ngFor="let viewer of data.Viewers;let i=index" 
			[ngClass]="{true:'selected',false:''}[i ==  getselectedRow('viewer')]"                        
			(dblTap)="addeditClicked(2,i,'viewer','edit')" nowrap
		<ion-col  col-4 class = "colb  center" (click)="setClickedRow(i,'viewer','Name')">{{viewer.Name}}</ion-col>
		<ion-col  col-3 class="colb   center" (click)="setClickedRow(i,'viewer','Tags')">
  		  <ul style="nobull margin-top : 0;margin-bottom : 0;margin-left:0;">
			<li *ngFor="let tag of viewer.Tags;let t=index;">{{tagfromID(tag)}}</li>
		<ion-col col-2 class = " colb  center " (click)="setClickedRow(i,'viewer','Advance')">{{viewer.Advance}} </ion-col>
		<ion-col col-1 class = " colb  center" (click)="setClickedRow(i,'viewer','RefreshRate')">{{viewer.ImageRefreshRate}}</ion-col>
		<ion-col col-2 class = "col colb  center" (click)="setClickedRow(i,'viewer','Active')">{{viewer.Active}}</ion-col>

here is the code for dblTap from

imported in src/app/app.module.ts
import { PressGestureDirective } from ‘…/directives/press-gesture/press-gesture’;
and declared in the declarations

import {Directive, ElementRef,  OnInit, OnDestroy, Output, EventEmitter} from '@angular/core';
import {Gesture} from 'ionic-angular/gestures/gesture';
declare var Hammer;  /* declare as u might get error hammer not found though its loaded already by ionic when we use gesture*/

Generated class for the PressGesture directive.

for more info on Angular 2 Directives.
selector: '[dblTap]' // Attribute selector
export class PressGestureDirective implements OnInit, OnDestroy{

el: HTMLElement;
pressGesture: Gesture;
@Output() dblTap: EventEmitter<any> = new EventEmitter();

constructor(el: ElementRef) {
this.el = el.nativeElement;

ngOnInit() {
this.pressGesture = new Gesture(this.el, {
recognizers: [
[Hammer.Tap, {taps: 2}]
this.pressGesture.on('tap', e => {

ngOnDestroy() {

1 Like