Ionic Directive not emitting event

Issue

I have created an Ionic 5 Directive for long press. Following is the code.

export class LongPressDirective implements AfterViewInit {

  private delay = 800;
  @Output() press = new EventEmitter();
  action: any;

  private longPressActive = false;

  constructor(private el: ElementRef,
    private gestureCtrl: GestureController,
    private zone: NgZone) { }

  ngAfterViewInit() {
    this.loadLongPressOnElement();
  }

  loadLongPressOnElement() {
    const gesture = this.gestureCtrl.create({
      el: this.el.nativeElement,
      threshold: 0,
      gestureName: 'long-press',
      onStart: ev => {
        this.longPressActive = true;
        this.longPressAction();
      },
      onEnd: ev => {
        this.longPressActive = false;
      }
    });
    gesture.enable(true);
  }

  private longPressAction() {
    if (this.action) {
      clearInterval(this.action);
    }
    this.action = setTimeout(() => {
      this.zone.run(() => {
        if (this.longPressActive === true) {
          this.longPressActive = false;
          this.press.emit();
        }
      });
    }, this.delay);
  }

}

When I use this in a button and pass the event for a Popover, the event is always undefined. So, my popover page appears at the middle of the screen instead of the button location.

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

async onPress(ev: any) {
// ev is undefined here
// raise popover here
}

I think I need to pass the event in this.press.emit(); method in the directive but I don't know what to pass. I tried a couple of things but didn't work.

Solution

just pass the event here

onStart: ev => {
  this.longPressActive = true;
  this.longPressAction(ev);
},

and here

private longPressAction(ev) {
   ...
   this.press.emit(ev);
   ... 
}

Answered By - Andrei