typescript - How to listen for a click-and-hold in Angular 2? -

in link, can find example in angularjs.

but how work in angular 2?

a simple implementation this.

@component({   selector: 'my-app',   template: `     <div>       <h2 (mousedown)="mousedown()" (mouseup)="mouseup()" (mouseleave)="mouseup()">hello {{name}}</h2>     </div>   `, }) export class app {   name: string;   timeouthandler: number;    constructor() {     this.name = 'angular!'   }   public mouseup() {     if (this.timeouthandler) {       cleartimeout(this.timeouthandler);       this.name = "canceled";       this.timeouthandler = null;     }   }    public mousedown() {     this.timeouthandler = settimeout(() => {       this.name = "has been long pressed"       this.timeouthandler = null;     }, 500);   } } 

it sets timeout canceled if user clicks away before set amount of time.

you can find working plnkr here.

if want happen on click on hold it's pretty easy well, swap settimeout setinterval.

@component({   selector: 'my-app',   template: `     <div>       <h2 (mousedown)="mousedown()" (mouseup)="mouseup()" (mouseleave)="mouseup()">hello {{name}}</h2>     </div>   `, }) export class app {   name: number = 0;   timeouthandler: number;    constructor() {     this.name = -1   }   public mouseup() {     if (this.timeouthandler) {       clearinterval(this.timeouthandler);       this.name = 0;       this.timeouthandler = null;     }   }    public mousedown() {     this.timeouthandler = setinterval(() => {       this.name += 1;     }, 100);   } } 

a working plnkr can found here.