opened
rgubarenko
username_0
Hi guys,

Looks like ngFor does not preserve items if the list is populated from the start. Here is a plunk I created: [Plunkr](http://plnkr.co/edit/SXzyyN?p=preview)

Every item has entry animation on it. Adding item with array.push() to the end of list - works as expected - animation is run only for the added item. Deleting from the end also works fine. However, when unshift() is used to insert item to the head, it causes all animations to rerun. Same problem with removing first item. Bug?
ngFor recreates all items if populated from the start with array.unshift()
issue
created
park9140
username_1
I ran into this as well.  When the change detection fires and has to reorder items it first detaches any domelements that will not be in the same order and then re adds them.  Seems pretty brute force right now hopefully something cleaner can be added that will minimize the number of Dom detach calls that need to be made when reordering.
comment
created
ChenXuyang
username_2
I ran into the same issue. I cannot seem to get the leaving transition/animation going when removing element from array.  The '* => void' does not do anything.

Here is a plunk I created: http://embed.plnkr.co/8sgTlkVtV77Ww00KmWgF/
comment
created
vicb
username_3
@username_6 could it be that detach followed by insert is interpreted as a creation instead of a move ?
see https://github.com/angular/angular/blob/c5c456120c4fe86ae8b65d90ded08394a176ad45/modules/%40angular/common/src/directives/ng_for.ts#L157
comment
created
benelliott
username_4
I am running into a similar issue in which removing an item from the source array of an ngFor will cause all ngFor elements to transition to the void state unless the item that was removed was the last in the array. This is visible in [this plunkr](http://plnkr.co/edit/WcVCFN5GPup79m8PoivL?p=preview) which is just the demo from the docs but with the Heroes.remove function altered to splice from the start of the array. The issue is visible when you add a handful of heroes and then click the "Remove hero" button once.
comment
created
Neill83
username_5
Hi, i have the same problem. I have an array to handle tabs and their content. If i delete a tab (and its correspondency in the array) the contents of all other tabs are reloaded. Deleting an entry in the array and using ngFor in HTML is the problem. I have a workaround using a second array for the content... but the content-div is still in the DOM because i only delete the tab from the first array... that shouldn't be the solution.

I'm using Angular 2.0.0-rc2
comment
created
matsko
username_6
This is being worked on this week. It's top priority.
comment
created
mbalex99
username_7
By the way how would you do animations with an immutable full update like with `Observable<Array<Item>>`

I have something like this 
```html
<div class="message me my-animation" *ngFor="let message of rx_messageModels | async">
      <p>{{message.body}}</p>
</div>
```
where 

```typescript
rx_messageModels : Observable<Array<MessageModel>>
```
comment
created
keathmilligan
username_8
Here is a plunk that I think exhibits another variation of this problem: https://plnkr.co/O6lV5b. Removing the last item works, but removing the first item causes the void animation to run on all of the elements and they all end up being removed.
comment
created
matsko
username_6
me and @robertmesserle have been working on this problem for a few days. We're close to getting a solution in time for RC5.
comment
created
matsko
username_6
We have a PR which has tests passing. Me and @mhevery are looking for any final corner cases: #10287.
comment
created
clakmalk
username_9
If you have added module "BrowserAnimationsModule", just remove it. then it should work.....
comment