Angular: Problems with Touchevents

Question

I need to detect a touchstart, one touchend and a touchmove to make a selection of days as the user drags his finger on the screen. However touchmove apparently not made for this purpose. As an example below, it will keep returning me only the first day.

Controller

@Component({
     selector: 'app-calendar',
     templateUrl: 'url.html'
})
export class Calendar {
    touchStart() {
        console.log('start');
    }

    touchHover(dia) {
        console.log('hover >> ' + dia);
    }

    touchEnd() {
        console.log('end');
    }
}

HTML

<div (touchstart)="touchStart()" (touchend)="touchEnd()">
     <div (touchmove)="touchHover('1')">1</div>
     <div (touchmove)="touchHover('2')">2</div>
     <div (touchmove)="touchHover('3')">3</div>
</div>

I need to receive each element after the touchstart, as the user passes under it on the device. The touchmove is executed but it will always return me the element where I started the touch. Example: If I startei the touch on day 1, it will be returning 1 independent gave be moving under day 2.

Has anyone been through this problem? They know how to solve it?

Answer 1

Testing Chrome Dev Tools for events mouse seem to work for touch (test pending on real device).

<div (mouseenter)="touchStart()" (mouseleave)="touchEnd()">
  <div (mouseenter)="touchHover('1')">1</div>
  <div (mouseenter)="touchHover('2')">2</div>
  <div (mouseenter)="touchHover('3')">3</div>
</div>