How to use `trackBy` with `ngFor`

Question

I can\'t really understand what I should return from trackBy. Based on some examples I\'ve seen on the web, I should return the value of some property on the ob

Answer 1

As this topic is still active & find a clear answer is difficult let me add few examples in addition to @Max's answer:

app.component.ts

   array = [
      { "id": 1, "name": "bill" },
      { "id": 2, "name": "bob" },
      { "id": 3, "name": "billy" }
   ]

   foo() {
      this.array = [
         { "id": 1, "name": "foo" },
         { "id": 2, "name": "bob" },
         { "id": 3, "name": "billy" }
      ]
   }

   identify(index, item) {
      return item.id;
   }

Let's display the array into 3 div using *ngFor.

app.component.html

Example of *ngFor without trackBy:

   {{e.id}} - {{e.name}}

foo

What happend if we click on foo button ?

→ The 3 divs will be refreshed. Try it yourself, open your console to verify.

Example of *ngFor with trackBy:

   {{e.id}} - {{e.name}}

foo

What happend if we click on foo button ?

→ Only the first div will be refreshed. Try it yourself, open your console to verify.

And what if we updated the first object instead of the whole object ?

   foo() {
      this.array[0].name = "foo";
   }

→ There is no need to use trackBy here.

It's especially usefull when using Subscription which often looks like what I schematized with array. So it would looks like:

   array = [];
   subscription: Subscription;

   ngOnInit(): void {
      this.subscription = this.fooService.getArray().subscribe(data => {
         this.array = data;
      });
   }

   identify(index, item) {
      return item.id;
   }

From documentation:

To avoid this expensive operation, you can customize the default tracking algorithm. by supplying the trackBy option to NgForOf. trackBy takes a function that has two arguments: index and item. If trackBy is given, Angular tracks changes by the return value of the function.

Read more here: https://angular.io/api/common/NgForOf

Find my original answer here: https://stackoverflow.com/a/57890227/9753985