Angular2 Ngfor Inside Tree Model: Wrong Order When Remove And Then Add Elements

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 a

Solution 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>
   `
)
classMyComponent {
  customTrackBy(index: number, obj: any): any {
    return index;
  }
}

With *ngFor:

@Component(
  template: `
   <div *ngFor="let item of items; trackBy:customTrackBy">
      {{item}}
   </div>
   `
)classMyComponent {
  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