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 object. Is it right? Why should I get index as a parameter?

For example, in the following case:

Component.component.ts

constructor() {
    window.setInterval(() => this.users = [
            { name: 'user1', score: Math.random() },
            { name: 'user2', score: Math.random() }
        ],
        1000);
}

userByName(index, user) {
    return user.name;
}

Component.template.html

<div *ngFor="let user of users; trackBy:userByName">
  {{user.name}} -> {{user.score}}
</div>

The objects shown in this template are still updated despite the name being unchanged. Why?

have you tried to write `let user of users; let index=index; trackBy:userByName(index,user)` ? — John, Feb 08 '17 at 08:40
@micronyks, I don't understand. Can you elaborate? With an example maybe? — Max Koretskyi, Feb 08 '17 at 09:15
What you don't understand? could you please tell me. I told you to return index that's it. — micronyks, Feb 08 '17 at 09:34
I don't understand how the comparing mechanism of ngFor is working where `ngTrackBy` come in — Max Koretskyi, Feb 08 '17 at 10:33

score 206 · Accepted Answer · edited Jul 03 '23 at 12:31

206

On each ngDoCheck triggered for the ngForOf directive, Angular checks what objects have changed. It uses differs for this process and each differ uses the trackBy function to compare the current object with the new one. The default trackBy function tracks items by identity:

const identify = (index: number, item: any) => item;

It receives the current item and should return some value. Then the value returned by the function is compared against the value this function returned the last time. If the value changes, the differ reports a change. So if the default function returns object references, it will not match the current item if the object reference has changed. So you can provide your custom trackBy function that will return something else. For example, some key value of the object. If this key value matches the previous one, then Angular will not detect the change.

The syntax ...trackBy:userByName is no longer supported. You must now provide a function reference. Here is the basic example:

setInterval( () => {
  this.list.length = 0;
  this.list.push({name: 'Gustavo'});
  this.list.push({name: 'Costa'});
}, 2000);

@Component({
  selector: 'my-app',
  template: `
   <li *ngFor="let item of list; trackBy:identify">{{item.name}}</li>
  `
})
export class App {
  list:[];

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

Although the object reference changes, the DOM is not updated. Here is the plunker. If you're curious how ngFor works under the hood, read this answer.

edited Jul 03 '23 at 12:31

rofrol

14,438
7
79
77

answered Jul 29 '17 at 15:58

Max Koretskyi

101,079
60
333
488

Can I use same `trackByFn` for 2 loops? – Yashwardhan Pauranik Oct 31 '18 at 13:11
7

@YashwardhanPauranik, if the function is pure, i.e. simply returns the result based on inputs, I don't see why you can't – Max Koretskyi Nov 01 '18 at 06:39
I cannot acess this (compoennt iteself) in trackbyfn . any way to do that? – Sunil Garg Apr 19 '19 at 06:13
1

@MaximKoretskyi And the answer to your question "The objects shown in template are still updated despite the name being unchanged. Why?" actually has nothing to do with `trackBy`, but rather with Angular change detection, right? I mean, **the `
` itself won't get repainted** (removed and then added again), but **the content of the `
` will get updated** anyway because in the template you bind `user.score` that changes every interval tick.
– Glenn Mohammad Oct 31 '19 at 22:10
1

@GlennMohammad 's statement makes sense. TrackBy only answers the question "whether to delete and recreate the DOM element? ". The {{content}} inside template tag will be rendered through for loop **regardless of the value returned by trackBy(**as long as DOM exists). ----- Mostly efficiency prevails when trackBy tells angular to render the changes without destroying the DOM. ----- AFAIU comparison include index too; like " ( index, tackBy(index, item) ) ". ----- ie: what was the return value by trackBy for current index lastTime. – Vaisakh Rajagopal Mar 09 '21 at 19:51
Compare "trackBy returns a constant value" vs "trackBy returns an ID from Object item". trackByConstant ideally say don't destroy & recreate the DOM even if data list is re-initialize. trackByID say only do if ID changes. But if we swap the data, btw distant index ie;3 & 6. You will see DOM destroy & recreation for both, may be bcz it take index too. trackByConstant work as normal swap the DOM in position. But trackByID seems to touch all intermediate DOM (3,4,5,6). The one above 3 and Below 6 remain untouched. Its just an observation, its helpful if someone could clarify this. – Vaisakh Rajagopal Mar 09 '21 at 20:15
https://stackblitz.com/edit/angular-ivy-jd9jtf?file=src/app/my-list/my-list.component.ts It may not be destroyed but if you inspect the

Vaisakh Rajagopal

Mar 09 '21 at 20:27

score 74 · Answer 2 · edited Sep 07 '21 at 14:55

74

As this topic is still active & finding 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 divs using *ngFor.

app.component.html

Example of *ngFor without trackBy:

<div *ngFor="let e of array;">
   {{e.id}} - {{e.name}}
</div>
<button (click)="foo()">foo</button>

What happens if we click the foo button ?

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

Example of *ngFor with trackBy:

<div *ngFor="let e of array; trackBy: identify">
   {{e.id}} - {{e.name}}
</div>
<button (click)="foo()">foo</button>

What happens if we click the 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 useful when using a Subscription which often looks like what I schematized with array. So it would look like:

 array = [];
 subscription: Subscription;

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

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

From the 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

edited Sep 07 '21 at 14:55

pjpscriv

866
11
20

answered Sep 20 '19 at 09:46

Emeric

6,315
2
41
54

18

I don't really understand, why only the first object gets updated in the second case (using `trackBy`). The `identify` method, which is used for detecting changes returns the `item.id`, which stays `1` before and after pressing the button. Only the name changed from `bill` to `foo`, but because the name is not compared, the method should not detect any change. I expected that nothing would have been updated in this case. I would have used `item.name`, but this seems to be the wrong approach. What am I missing here? Can someone clarify this please? – Thomas Dec 26 '19 at 11:35
2

@Thomas `identify` is used to identify objects from your `*ngFor` array → you have to choose a static value like an id. Have a look here https://angular.io/api/common/NgForOf#ngForTrackBy if you want to learn more about ngForTrackBy. – Emeric Jan 28 '20 at 18:36
I logged the index and item inside the trackBy function and it is logging nonstop. Is this normal? – Prajil Shrestha Dec 13 '20 at 14:23
@PrajilShrestha yes this is the normal behavior, it has nothing to do with `trackBy`, it's about Angular cycle (https://angular.io/guide/lifecycle-hooks) and its change detection (https://angular.io/api/core/ChangeDetectorRef). – Emeric Dec 13 '20 at 16:33
very good explanation thanks – Ruben Nov 12 '21 at 09:56
1

The Angular docs for TrackByFunction (https://angular.io/api/core/TrackByFunction) specifically state, "NgForOf needs to uniquely identify items in the iterable to correctly perform DOM updates when items in the iterable are reordered, new items are added, or existing items are removed." The example above exhibits none of these. It goes on to say, "In all of these scenarios it is usually desirable to only update the DOM elements associated with the items affected by the change." – JWess Jan 20 '22 at 18:27
1

@Thomas It's becouse trackBy tracks if an element should be re-rendered, which in this case it does not, BUT the change detection still updates (not re-renders) the value of element. So the trackBy is actually working properly. – Jakub Mar 30 '23 at 22:16

Rémy Esmery · Answer 3 · 2021-07-31T11:13:50.600

Here's what I use in my projects to allow tracking by a property of the iterated model without the hassle of writing a function in the component's class :

import { Host, Directive, Input } from "@angular/core";
import { NgForOf } from "@angular/common";

@Directive({
    selector: "[ngForTrackByProperty]"
})
export class TrackByPropertyDirective {

    private _propertyName: string = "";

    public constructor(@Host() private readonly _ngFor: NgForOf<any>) {
        this._ngFor.ngForTrackBy = (_: number, item: any) => this._propertyName ? item[this._propertyName] : item;
    }

    @Input("ngForTrackByProperty")
    public set propertyName(value: string | null) {
        // We must accept null in case the user code omitted the ": 'somePropName'" part.
        this._propertyName = value ?? "";
    }

}

Usage :

<some-tag *ngFor="let item of models; trackByProperty: 'yourDiscriminantProp'">

score 5 · Answer 4 · answered Mar 31 '22 at 11:11

app.component.html

<button class="btn btn-warning" (click)="loadCourses()">LoadCourses</button>
<ul>
    <li *ngFor="let course of courses; trackBy:trackCourse">
        {{course.name}}
    </li>
</ul>

app.component.ts

loadCourses() {

    this.courses = [
    {id:1, name:'cour1'},
    {id:2, name:'cour2'},
    {id:3, name:'cour3'}
    ]  
};

trackCourse(index : number, course: any) {
    return course ? course.id : undefined;
};

Reference Code With Mosh You can find in Directives Section

score 4 · Answer 5 · edited Aug 21 '23 at 20:27

The purpose of using the trackBy is to set the identity of elements in an iterable. If Angular sees two elements with the same identity, it will proceed to check the content of the elements and will only repaint/re-render if the content is changed. Without the identity, Angular will rely on the object reference of the elements that usually change even when the content is the same, and thus Angular will repaint/re-render the elements because of different references.

score 0 · Answer 6 · answered Jul 28 '23 at 10:33

<div *ngFor="let user of users; trackBy:userByName">
{{user.name}} -> {{user.score}}
</div>

public function userByName(index: number, user: User): id {
  return user?.id;
}

Even though i have seen correct answers as above in this thread, i have got some lint/sonar issues for un-used index parameter. so i think the below code can also achieve the action.

<div *ngFor="let user of users; trackBy:userByName">
{{user.name}} -> {{user.score}}
</div>

public function userByName(user: User): number {
  return user?.id;
}

score -13 · Answer 7 · edited Jan 09 '19 at 00:03

-13

This angular NgFor document will help you. https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Below example for your code

<div *ngFor="let user of users; trackBy:user?.name">
 {{user.name}} -> {{user.score}}
</div>

edited Jan 09 '19 at 00:03

Simply Ged

8,250
11
32
40

answered Feb 08 '17 at 09:21

Kishan Mundha

2,989
18
26

2

I can't seem to find an example of `trackBy` used not with callback function, but by passing iterated item's property directly. Can you confirm this usage somehow? – Kamilius Nov 30 '18 at 10:46
You cannot track by null, everyone should stop using the "?" blindly. So much bad code exists because of it. – Cesar Aug 02 '23 at 14:46

score -15 · Answer 8 · answered Dec 06 '19 at 05:40

-15

else you can use

*ngFor="a of array; index as i;"

and

[attr.data-target]="'#test' + i"

and

name="test{{i}}

answered Dec 06 '19 at 05:40

Mayur Saner

444
5
10

These are not `trackBy`. Please see https://angular.io/api/common/NgForOf#ngForTrackBy. – Dan Jan 10 '20 at 23:13

How to use `trackBy` with `ngFor`

8 Answers8

Below example for your code

Linked