CODEWITHSUNDEEP
angularionic-framework
Michaël Randria
Michaël Randria

Reputation: 500

Press event is not fired on Ionic 5

I want to implement multiple select on multiple items (a list of ion-item-sliding) when one of them is pressed for few seconds by adding (press) to each ion-item-sliding and it seems that the press event is never fired. I moved the press event to ion-item but nothing still happened. Then I tried to test directly the press event on a ion-button and found out that the press event is the problem because when I change it to click it's working perfectly. Here is what I tried:

<ion-button (press)="itemPressed()">Test</ion-button>

itemPressed() {
    console.log("expecting to work");
}

Upvotes: 4

Views: 4199

Answers (5)

jalogar
jalogar

Reputation: 1684

At this moment, for Ionic 6, this probably is the best option

https://forum.ionicframework.com/t/ionic-5-long-press-gesture-example/188746/7

It works like a charm and you don't need to install any module.

Upvotes: 1

Sygmoral
Sygmoral

Reputation: 7181

The best solution is actually to use the contextmenu event instead of press. This is natively supported and so will not need HammerJS (or anything else).

Upvotes: 0

Taylor Rahul
Taylor Rahul

Reputation: 729

I think you can use the tap and click event as mentioned below instead of using press.

<ion-button (click)="itemPressed()">Test</ion-button>

or

<ion-button tappable (tap)="itemPressed()">Test</ion-button>

if you want to use the long press event. there is NPM plugin avilable on below url you can use that.. this could help you.

https://www.npmjs.com/package/ionic-long-press

Ionic long press event on cards

Upvotes: 1

Bary
Bary

Reputation: 36

In addition to @Arj 1411's answer add HammerModule in '@angular/platform-browser' imports and this should be work.

Upvotes: 2

Arj 1411
Arj 1411

Reputation: 1401

Hi you can implement long press with Hammer.js

1.install Hammer.js from npm install hammerjs — save

2.on src/main.ts file make changes like following

 import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app/app.module';
    import { environment } from './environments/environment';
    **import "hammerjs";** 
    
    if (environment.production) {
      enableProdMode();
    }
platformBrowserDynamic().bootstrapModule(AppModule)   .catch(err => console.log(err));

3.on your template and component file

<ion-button (press)="onPress($event)" (pressup)="onPressUp($event)"> Test </ion-button>

onPress($event) {
    console.log("onPress", $event);
}

onPressUp($event) {
    console.log("onPressUp", $event);
}

Try this. If this is not working as expected let me know. I will edit my answer

Upvotes: 1

Related Questions