How to provide double click callback on ion-select?

Ionic Framework ionic-v3
1

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"
                        (ionSelect)="previewMacro(item)">{{item.MacroName}}
            </ion-option>
 </ion-select>

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

2

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>
</button>

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.

3

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

4

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.

5

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

6

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
			(press)="deleterow(i,'viewer')"			 
			 >
		<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>
		  </ul>											  
		</ion-col>
		<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>
	</ion-row>

here is the code for dblTap from https://angular2wangmo.wordpress.com/2017/04/11/ionic-2-create-custom-directive-for-double-tap/

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

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.

See https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html
for more info on Angular 2 Directives.
*/
@Directive({
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.listen();
this.pressGesture.on('tap', e => {
this.dblTap.emit(e);
})
}

ngOnDestroy() {
this.pressGesture.destroy();
}

}
1 Like