CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
MrFlyingToasterman
MrFlyingToasterman

Reputation: 227

Ionic Framework hold click event

Is it possible to assign a button to a "hold click" event in TypeScript?

Like:

<button ion-button icon-only color="royal" (click)="addNote()" (holdclick)="removeNote()">

Upvotes: 3

Views: 12878

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

You can use the press event (more info in the Gestures docs):

import { Component } from '@angular/core';

@Component({
  templateUrl: 'template.html'
})
export class BasicPage {

  public press: number = 0;

  constructor() {}

  pressEvent(e) {
    this.press++
  }

}

And in the view:

  <ion-card (press)="pressEvent($event)">
    <ion-item>
      Pressed: {{press}} times
    </ion-item>
  </ion-card>

If that's not enough (maybe you need a longer press event in your scenario), you can create your own gesture event by creating a custom directive. More information can be found in this amazing article by roblouie. The article uses an old version of Ionic, but the main idea is still the same (and pretty much all the code should work like it is):

import {Directive, ElementRef, Input, OnInit, OnDestroy} from '@angular/core';
import {Gesture} from 'ionic-angular';

@Directive({
  selector: '[longPress]'
})
export class PressDirective implements OnInit, OnDestroy {
  el: HTMLElement;
  pressGesture: Gesture;

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

  ngOnInit() {
    this.pressGesture = new Gesture(this.el, {
      recognizers: [
        [Hammer.Press, {time: 6000}] // Should be pressed for 6 seconds
      ]
    });
    this.pressGesture.listen();
    this.pressGesture.on('press', e => {
      // Here you could also emit a value and subscribe to it
      // in the component that hosts the element with the directive
      console.log('pressed!!');
    });
  }

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

And then use it in your html element:

<button longPress>...<button>

Upvotes: 10

Related Questions