How to handle “single click” and “double click” on the same html DOM element using typescript:Angular 2 or 4?

Question

My issue is, the methods used for both the events is getting triggered when I perform \"double click\"

For example, I need to perform specific functionality when spe

Answer 1

It needs simple work-round to block single click then do double click.  Check this example 

@Component({
  selector: 'my-app',
  template: `
    

      
{{title}}
         Click 
    
  `,
})
export class App {
  title:string;
  preventSingleClick = false;
  timer: any;
  delay: Number;
  constructor() {
    this.title = `Angular (click) and (dblclick)`
  
  }
  
  singleClick(event) {
    this.preventSingleClick = false;
     const delay = 200;
      this.timer = setTimeout(() => {
        if (!this.preventSingleClick) {
           alert('Single Click Event');
        }
      }, delay);
  }
  
  doubleClick () {
    this.preventSingleClick = true;
    clearTimeout(this.timer);
    alert('Double Click Event')
  }
}

[plunker][1]

  [1]: http://plnkr.co/edit/pbsB0zYQCEY4xrPKngrF?p=preview