Issue 1:
I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

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.

It looks like I need to do some combination of "insert" and "remove", which this comment in the source code alludes to:

// TODO(i): refactor insert+remove into move
ViewContainerRef_.prototype.insert = function (viewRef, index) {

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.

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.

Expected behavior

When Components are moved they will not cause future component insertions to go to the wrong ViewContainer.

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).

Minimal reproduction of the problem with instructions

I've created the following Plunker which demonstrates the problem: http://plnkr.co/edit/JRhGsje9ppzamNIsuk90?p=preview

To recreate the problem:

Add Left

Add Center

Move Last Center to Left

Add Center

The last “Add Center” will cause the component to be added to the left instead of the center.

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

Within my application Components are inserted, removed, and moved based on user interaction within a dashboard-like UI. In order for movement to work this needs to be resolved.

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.

Please tell us about your environment:

Windows 10, Visual Studio 2015, npm, IIS

Angular version: 2.2.3

Browser: [Chrome 54.0.2840.99 | Edge 25.10586.672.0]

Language: [TypeScript 2.0.3.0]

Node (for AoT issues): node --version = v7.1.0

Issue 2:
I'm submitting a...

[X] Bug Report

[X] Feature request

I am not sure if the behavior is intended but it clearly causes problems.

Current behavior

We are unable to detach a ViewRef from ViewContainerRef A and attach it to a different ViewContainerRef B

Insert / Detaching doesn't trigger change detection on both ViewContainers.

Using @ContentChildren fails to update changes properly.

Expected behavior

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.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-gitter-couoxk?file=app%2Ftest.ts

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

Would allow to implement Drag & Drop that doesn't recreate the components when an item is dragged over.

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.

Environment

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: