Angular2 NgFor inside tree model: wrong order when remove and then add elements

Question

I'm playing with angular 2 alpha 44.

I have a tree model and use recursivity to display it. Each group contain 'Criterions', 'Segments' and others 'Groups'. We can delete and add all of these elements at any level.

There is a weird behavior when I remove elements and then add others on a same level. The new order is wrong, new elements got a bigger position property and array are sort on this property but they appears where elements were removed..

The new array is logged in the console and appears in the right order. And if you remove and add all the tree using the "SHOW/HIDE" button, the view is now in the right order.

You can see this behavior in this plunker and understand easily:

1. Remove the first element
2. Add a new element
3. See that order in the view is not right and not identical as inside the console log
4. Click 2 times on "SHOW/HIDE" button
5. See that order in the view is now correct

Is there something like ng1 trackBy with ng2 NgFor? I found nothing about it inside sources..

Answer 1

trackBy was added in 2.0.0-beta.3

See also https://github.com/angular/angular/issues/4402

With template element:

@Component(
  template: `
   <template ngFor let-item [ngForOf]="items" [ngForTrackBy]=customTrackBy">
      {{item}}
   </template>
   `
)
class MyComponent {
  customTrackBy(index: number, obj: any): any {
    return index;
  }
}

With *ngFor:

@Component(
  template: `
   <div *ngFor="let item of items; trackBy:customTrackBy">
      {{item}}
   </div>
   `
)
class MyComponent {
  customTrackBy(index: number, obj: any): any {
    return index;
  }
}

See also https://github.com/angular/angular/issues/6872

I can either use the * *ngFor="let character of characters | async" *ngForTrackBy="customTrackBy"

or I can use *ngFor="let character of characters | async ; trackBy:customTrackBy"

See also Angular 2 ngModel bind in nested ngFor