Issue 1:
Steps to reproduce - see Plnkr demo below (touchscreen required)

I have a Parent Component with an array (of Child Components) that is rendered using *ngFor.

<my-child-cmp *ngFor="#child of children" [info]="child" ... ></my-child-cmp>

Within MyChildCmp I have an event listener to detect which child is being dragged

@HostListener('mousedown', ['$event'])
@HostListener('touchstart', ['$event'])
onDragStart(event) {
this.selected.emit(this.info.id);
}

The Parent Component enables each Child Component to be 'Dragged' about the screen by

@HostListener('mousemove', ['$event'])
@HostListener('touchmove', ['$event'])
onDragMove(event) {
...
}

@HostListener('mouseup', ['$event'])
@HostListener('touchend', ['$event'])
@HostListener('touchcancel', ['$event'])
onDragEnd(event) {
...
}

However, if an event causes the children array to be updated during a drag, it causes the TouchEvents (i.e. touchmove, touchend, touchcancel) to stop firing if the Child component was removed from the DOM. Using a mouse instead of touchscreen has no issues whatsoever!

Use case: Appointment bookings system. Child Component is a booking, you drag the booking to the 'Next Day' button, which updates the children array to the next day's bookings. Angular 2 removes the previous days bookings from the DOM (even when touchstart is stiil bound to removed element)

See my Plnkr demo below, where I update the children array after 2 seconds of dragging.

Plnkr Demo: https://plnkr.co/edit/1RzYpEgCI0y60pCauvGp?p=preview

Expected/desired behavior: If the mouse behaviour works, I'd expect the touch equivalent to work the same.

Angular2 should give the user programmatic ability to keep a single component from being removed from the DOM (i.e. the component being dragged) OR first check if there is an active touchstart event on a Component it is about to remove from the DOM. It'd be great if it wasn't removed until touchend or touchcancel was fired (maybe setting display: none?)

Other information

Tested in: Chrome 49.0.2623.87 m (Win7 Touchscreen) and iOS Safari 9.2.1

Angular2 Beta14

Issue 2:
I'm submitting a ...

[x] bug report

Current behavior

If I drag a component, bound within an *ngFor, (using a touchscreen) and an external event causes the ngFor array to update, touchmove events stop firing. This is a terrible experience on mobile. Angular 2 is nearing official release and I'm concerned how to fix the mobile experience. Mouse dragging does not have this issue.

E.g. I have a data array, currentBookings = [{..}, {..}], that is bound with an *ngFor such as

<booking *ngFor="let booking of currentBookings"></booking>

and I drag one of the generated <booking> components to the 'nextDay' button, which causes the currentBookings array to update. See this Plunker

I have dealt with this (Touch Spec / Browser Implementation) issue in the past (vanilla JS) by simply keeping the DOM element reference around until the touchend or touchcancel event fire.

However, Angular controls the DOM now !

Could this be solved by Angular implementing a canDestroy() Component guard (i.e not route guard) ???

Expected/desired behavior

A canDestroy() Component guard. Or any solution that avoids premature DOM removal of an element. Angular could keep the DOM element in memory and set a style of {display: none;}. Anything to improve the drag experience on mobile...which is pretty important in my opinion.

Reproduction of the problem

See this Plunker. Note: Touchscreen required (or Chrome Dev Tools mobile emulation)

What is the expected behavior?

In my Plunker, I expect the touchmove events to keep firing after dragging the 'booking' to the next/prev day. It works as expected with mouse dragging.

What is the motivation / use case for changing the behavior?

Improve the mobile experience of Angular 2.

Environment:

Angular version: 2.0.0-rc.4

Browser: [Chrome 51 (with touchscreen), iOS 9.3.2 Safari]

Language: Typescript@1.9.0-dev.20160409 see plunker