Angular Draggable, tooltip and click

Question

I am using Draggable and Droppable plugin in Angular 5. Document link: https://mattlewis92.github.io/angular-draggable-droppable/docs/ .

I have a requirement that I need to show a popup on click of a div on which draggable is applied. I am using this code:

    <div class="circle" mwlDraggable [dropData]="{event: event}"  [dragAxis]="{x: event.draggable, y: event.draggable}" (dragStart)="fromEng = eng.id"  (click)="handleEvent(event, true)">
       <ng-container  *ngTemplateOutlet="tooltipBlock"></ng-container>
    </div>


    <ng-template #tooltipBlock>
     <span class="tooltiptext" >{{ event.title }}</span>
    </ng-template>

Here click event not fire on first click. It fires after second click. What I need is that draggable work when we hold and move the element and handleEvent function call on single mouse click. I allready tried mouseup, but that also not works.

Answer 1

I added the click event on tooltip, then it worked.

<ng-template #tooltipBlock>
    <span class="tooltiptext" (click)="handleEvent(event, true)">{{ event.title }}</span>
</ng-template>

Update: Above solution was creating issue when click on border of circle div, since tooltip is located inside circle div. So I had to use tap event in circle div and for this I installed hammerjs:

npm install --save hammerjs 
npm install --save-dev @types/hammerjs

Then import hammerjs in app.module.ts :

import 'hammerjs';

Then updated code:

<div class="circle" mwlDraggable [dropData]="{event: event}"  [dragAxis]="{x: event.draggable, y: event.draggable}" (dragStart)="fromEng = eng.id"  (tap)="handleEvent(event, true)">
   <ng-container  *ngTemplateOutlet="tooltipBlock"></ng-container>
</div>


<ng-template #tooltipBlock>
 <span class="tooltiptext" >{{ event.title }}</span>
</ng-template>