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\'. W

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