<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
After a component is moved to a different ViewContainer, new Components that are added using "createComponent" on a ViewContainer are inserted into the wrong ViewContainer.</p>
<p dir="auto"><del>It looks like I need to do some combination of "insert" and "remove", which this comment in the source code alludes to:</del></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// TODO(i): refactor insert+remove into move
ViewContainerRef_.prototype.insert = function (viewRef, index) {"><pre class="notranslate"><code class="notranslate">// TODO(i): refactor insert+remove into move
ViewContainerRef_.prototype.insert = function (viewRef, index) {
</code></pre></div>
<p dir="auto"><del>The problem is that using this combination doesn’t work.  If I try to remove the ViewRef and then insert it elsewhere it's flagged as destroyed and it becomes unusable.</del></p>
<p dir="auto">Edit:  After further investigation "detach" and then "insert" works where "insert"/"move" alone (or with "remove") does not.  That said, since "move" does not function on its own this still seems like an issue.  Additionally, the "detach" comment refers to moving a View "within the current container", but it does not need to be within the current container.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
<del>When Components are moved they will not cause future component insertions to go to the wrong ViewContainer.</del></p>
<p dir="auto">Using "insert"/"move" will not result in unexpected behavior if they are not used in conjunction with "detach" (alternatively, an exception that recommends the possibility of using "detach" in this situation would be helpful).</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto">I've created the following Plunker which demonstrates the problem:  <a href="http://plnkr.co/edit/JRhGsje9ppzamNIsuk90?p=preview" rel="nofollow">http://plnkr.co/edit/JRhGsje9ppzamNIsuk90?p=preview</a></p>
<p dir="auto">To recreate the problem:</p>
<ol dir="auto">
<li>Add Left</li>
<li>Add Center</li>
<li>Move Last Center to Left</li>
<li>Add Center</li>
</ol>
<p dir="auto">The last “Add Center” will cause the component to be added to the left instead of the center.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Within my application Components are inserted, removed, and moved based on user interaction within a dashboard-like UI.  <del>In order for movement to work this needs to be resolved.</del></p>
<p dir="auto">Edit:  Since I'm able to use "detach" in conjunction with "insert" I can achieve what I need to within the UI.  However, I would expect that "move" would work on its own to accomplish this.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10, Visual Studio 2015, npm, IIS</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.2.3</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [Chrome 54.0.2840.99 | Edge 25.10586.672.0]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript 2.0.3.0]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> = v7.1.0</p>
</li>
</ul>
<h2 dir="auto">I'm submitting a...</h2>
<p dir="auto">[X] Bug Report<br>
[X] Feature request<br>
I am not sure if the behavior is intended but it clearly causes problems.</p>
<h2 dir="auto">Current behavior</h2>

<p dir="auto">We are unable to detach a ViewRef from <strong>ViewContainerRef A</strong> and attach it to a different <strong>ViewContainerRef B</strong></p>
<p dir="auto">Insert / Detaching doesn't trigger change detection on both ViewContainers.<br>
Using <code class="notranslate">@ContentChildren</code> fails to update changes properly.</p>
<h2 dir="auto">Expected behavior</h2>

<p dir="auto">I would like to be able to detach a ViewRef and attach it to a new ViewContainer without recreating the components inside the view. This should work without any issues.</p>
<h2 dir="auto">Minimal reproduction of the problem with instructions</h2>
<p dir="auto"><a href="https://stackblitz.com/edit/angular-gitter-couoxk?file=app%2Ftest.ts" rel="nofollow">https://stackblitz.com/edit/angular-gitter-couoxk?file=app%2Ftest.ts</a></p>
<h2 dir="auto">What is the motivation / use case for changing the behavior?</h2>

<p dir="auto">Would allow to implement Drag &amp; Drop that doesn't recreate the  components when an item is dragged over.<br>
Would allow to manipulate dom without using nativeElement, No more worrying about *ngFor trying to find the changes and throwing errors when nodes are missing in dom.</p>
<h2 dir="auto">Environment</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
Angular version: 4.x
and 
Angular version: 5.x


Browser:

- [x] Chrome (desktop) version XX
- [x] Chrome (Android) version XX
- [x] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [x] Safari (iOS) version XX
- [x] IE version XX
- [x] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:
"><pre class="notranslate"><code class="notranslate">
Angular version: 4.x
and 
Angular version: 5.x


Browser:

- [x] Chrome (desktop) version XX
- [x] Chrome (Android) version XX
- [x] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [x] Safari (iOS) version XX
- [x] IE version XX
- [x] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

</code></pre></div>