Angular 7 single click and double click events

Question

My table row is configured like below,

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]" [routerLink]="['/invoices', v.userid]">

The above code snippet works for a single click on the row. I tried to associate double clink on the above code

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]" [routerLink]="['/invoices', v.userid]"
            (dblclick)="somefunction()">

But now also, only single clink works. Double click worked when [routerlink] was removed.

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]"
            (dblclick)="somefunction()">

What should I do achieve both single click and double click functionality in Angular 7?

Solution

Here you can use a timeout and a boolean flag to solve this.

Consider the following:

The DOM takes a few milliseconds to recognize the double click.

But it recognizes the double click but the first click is also recognized.

So the logic goes like this.

your.component.ts

export class App {

  preventSingleClick = false;
  timer: any;
  delay: Number;

  singleClick(event) {
    this.preventSingleClick = false;
     const delay = 200;
      this.timer = setTimeout(() => {
        if (!this.preventSingleClick) {
           //Navigate on single click
        }
      }, delay);
  }

    doubleClick (event) {
      this.preventSingleClick = true;
      clearTimeout(this.timer);
      //Navigate on double click
    }
 }

HTML

<tr  *ngFor="let v of mf.data | sortgrid: '-lastheartbeat'; index as i"
            [class.table-success]="venuesRunning[i]"  (click)="singleClick($event)" (dblclick)="doubleClick($event)" >

Comments

[ConnorsFan]

What is the routerLink supposed to do? You don't want it to navigate after the first click?

[rohit]

@ConnorsFan routerLink currently routes on a single clink. So i am good with routerLink on the 'tr'. I need to associate a double clink option on this 'tr' to route to a different view on double clink/tap

[ConnorsFan]

And when it starts navigating on the first click, is the tr element still there to receive the second click?

[rohit]

@ConnorsFan nope. Yeah... that makes sense. Thank you. But is there a way to navigate to two different routes on a single tr ? All i can think about is add a button on a tr cell and activate the other route.

[ConnorsFan]

You can navigate programmatically in the (click) event handler. If you want to navigate differently on a double-click, you would have to delay the navigation, to allow the double-click event to be triggered (or not). You could also navigate to a different destination if a key is pressed (e.g. shift, ctrl) when the row is clicked.