<p dir="auto"><strong>Steps to reproduce</strong>  - see Plnkr demo below (<strong><em>touchscreen required</em></strong>)</p>
<p dir="auto">I have a Parent Component with an array (of Child Components) that is rendered using *<strong>ngFor</strong>.</p>
<p dir="auto"><code class="notranslate">&lt;my-child-cmp *ngFor="#child of children" [info]="child" ... &gt;&lt;/my-child-cmp&gt;</code></p>
<p dir="auto">Within MyChildCmp I have an event listener to detect which child is being dragged</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@HostListener('mousedown', ['$event'])
@HostListener('touchstart', ['$event'])
onDragStart(event) {
    this.selected.emit(this.info.id);
}"><pre class="notranslate"><code class="notranslate">@HostListener('mousedown', ['$event'])
@HostListener('touchstart', ['$event'])
onDragStart(event) {
    this.selected.emit(this.info.id);
}
</code></pre></div>
<p dir="auto">The Parent Component enables each Child Component to be '<em>Dragged</em>' about the screen by</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@HostListener('mousemove', ['$event'])
@HostListener('touchmove', ['$event'])
onDragMove(event) { 
  ...
}

@HostListener('mouseup', ['$event'])
@HostListener('touchend', ['$event'])
@HostListener('touchcancel', ['$event'])
onDragEnd(event) { 
   ...
}"><pre class="notranslate"><code class="notranslate">@HostListener('mousemove', ['$event'])
@HostListener('touchmove', ['$event'])
onDragMove(event) { 
  ...
}

@HostListener('mouseup', ['$event'])
@HostListener('touchend', ['$event'])
@HostListener('touchcancel', ['$event'])
onDragEnd(event) { 
   ...
}
</code></pre></div>
<p dir="auto"><strong>However</strong>, if an event causes the <em>children</em> array to be updated <strong>during a drag</strong>, it causes the TouchEvents (i.e. touchmove, touchend, touchcancel) to <strong>stop firing</strong> if the Child component was removed from the DOM. Using a mouse instead of touchscreen <strong>has no issues whatsoever!</strong></p>
<p dir="auto"><strong>Use case</strong>: 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)</p>
<p dir="auto">See my Plnkr demo below, where I update the <em>children</em> array <strong><em>after 2 seconds of dragging</em></strong>.</p>
<p dir="auto"><em>Plnkr Demo: <a href="https://plnkr.co/edit/1RzYpEgCI0y60pCauvGp?p=preview" rel="nofollow">https://plnkr.co/edit/1RzYpEgCI0y60pCauvGp?p=preview</a></em></p>
<p dir="auto"><strong>Expected/desired behavior</strong>: If the mouse behaviour works, I'd expect the touch equivalent to work the same.</p>
<p dir="auto">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 <strong><em>touchstart</em></strong> event on a Component it is about to remove from the DOM. It'd be great if it wasn't removed until <em>touchend</em> or <em>touchcancel</em> was fired (maybe setting display: none?)</p>
<p dir="auto"><strong>Other information</strong><br>
Tested in: Chrome 49.0.2623.87 m (Win7 Touchscreen) and iOS Safari 9.2.1<br>
Angular2 Beta14</p>
<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report  "><pre class="notranslate"><code class="notranslate">[x] bug report  
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">If I drag a component, bound within an <code class="notranslate">*ngFor</code>, (using a <strong>touchscreen</strong>)  and an external event causes the ngFor array to update, <code class="notranslate">touchmove</code> events stop firing. This is a terrible experience on mobile. Angular 2 is nearing official release and I'm concerned how to fix the <strong>mobile</strong> experience. <strong>Mouse</strong> dragging does not have this issue.</p>
<p dir="auto"><strong>E.g.</strong> I have a data array, <code class="notranslate">currentBookings = [{..}, {..}]</code>, that is bound with an <code class="notranslate">*ngFor</code> such as</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;booking *ngFor=&quot;let booking of currentBookings&quot;&gt;&lt;/booking&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-smi">booking</span> <span class="pl-c1">*</span><span class="pl-s1">ngFor</span><span class="pl-c1">=</span><span class="pl-s">"let booking of currentBookings"</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-s1">booking</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">and I drag one of the generated <code class="notranslate">&lt;booking&gt;</code> components to the 'nextDay' button, which causes the <code class="notranslate">currentBookings</code> array to update.  See <a href="http://plnkr.co/edit/QR6WDzv6NxOmn6LXTngG?p=preview" rel="nofollow">this Plunker</a></p>
<ul dir="auto">
<li>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 <code class="notranslate">touchend</code> or <code class="notranslate">touchcancel</code> event fire.</li>
<li>However, Angular controls the DOM now !</li>
<li>Could this be solved by Angular implementing a <code class="notranslate">canDestroy()</code> Component guard (i.e not route guard) ???</li>
</ul>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">A <code class="notranslate">canDestroy()</code> <strong>Component</strong> 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 <code class="notranslate">{display: none;}</code>. Anything to improve the drag experience on <strong>mobile</strong>...which is pretty important in my opinion.</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<p dir="auto">See this <a href="http://plnkr.co/edit/QR6WDzv6NxOmn6LXTngG?p=preview" rel="nofollow">Plunker</a>. Note: Touchscreen required (or Chrome Dev Tools mobile emulation)</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">In my <a href="http://plnkr.co/edit/QR6WDzv6NxOmn6LXTngG?p=preview" rel="nofollow">Plunker</a>, I expect the <code class="notranslate">touchmove</code> events to keep firing after dragging the 'booking' to the next/prev day. It works as expected with <strong>mouse</strong> dragging.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">Improve the <strong>mobile</strong> experience of Angular 2.</p>
<p dir="auto"><strong>Environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.4</li>
<li><strong>Browser:</strong> [Chrome 51 (with touchscreen), iOS 9.3.2 Safari]</li>
<li><strong>Language:</strong> Typescript@1.9.0-dev.20160409 see plunker</li>
</ul>