title: How to register touch move over events in Angular?
body: <p><strong>Summarize the problem</strong></p>
  
  <p>Stackblitz - <a href="https://stackblitz.com/edit/angular-touch-playground" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-touch-playground</a></p>
  
  <p>I'm trying register touch events and want to be able to touch my finger, drag and lift my finger resulting in every <code>td</code> of a table touched to be highlighted. This seems to be recorded as a <code>pan</code> event</p>
  
  <p>I've used a dictionary <code>pressed</code> when any of the events <code>click, touch, etc</code> registers and <code>[class.bg-warning]="pressed[i]"</code> to highlight these.</p>
  
  <p>Is there a way to register each <code>td</code> touched?</p>
  
  <p>I've tried events like <code>click, touchstart</code>
  and <code>hammerjs</code> events (in <code>app.module.ts</code> I've imported via <code>import 'hammerjs';</code>) but I have to click every <code>td</code> to highlight it.</p>
  
  <pre><code>&lt;td *ngFor="let dummy of ' '.repeat(48).split(''), let i = index"
      (press)="logPress(i)"
      (mouseenter)="logMouseIn(i)"
      (touchmove)="logTouchmove(i)"
      (click)="logClick(i)"
      (touch)="logTouch(i)"
      (touchend)="logTouchend(i)"
      (hover)="logHover(i)"
      (touchstart)="logTouchstart(i)"
      (touchend)="logTouchend(i)"
      (touchcancel)="logTouchcancel(i)"
      [class.bg-warning]="pressed[i]" &gt;
  &lt;/td&gt;
  </code></pre>
  
  <p><em>example of setting <code>pressed</code> dictionary:</em></p>
  
  <pre><code>logClick(i: number) {
   this.event += '\n Click: '+ i.toString();
   this.pressed[i]=1;
  }
  </code></pre>