Una implementación simple se vería así.

 @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); } }

Establece un tiempo de espera que se cancela si el usuario hace clic antes de un período de tiempo determinado.

Puede encontrar un plnkr que funcione aquí .

Si lo que desea es que suceda algo al hacer clic en espera, también es bastante fácil de hacer, simplemente cambie setTimeout por 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; 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); } }

Un plnkr de trabajo se puede encontrar aquí .