how to use track by inside ngFor angular 2

AngularNgforAngularjs Track-By

Angular Problem Overview

tried every syntax i can guess couldnt make it works !

<!--- THIS WORKS FINE --->
<ion-card *ngFor="#post of posts">

<!--- BLANK PAGE --->
<ion-card *ngFor="#post of posts track by">

<!--- Exception : Cannot read property 'id' of undefined --->
<ion-card *ngFor="#post of posts;">

<!--- Exception : Cannot read property 'undefined' of undefined --->
<ion-card *ngFor="#post of posts;trackBy:posts[index].id">

<!--- Blank page no exception raised !  --->
<ion-card *ngFor="#post of posts;#index index;trackBy:posts[index].id">

the only approach that worked for me was

  1. Creating method in controller Class

    identify(index,post:Post){ return }


<ion-card *ngFor="#post of posts;trackBy:identify">

is this is only way ? can i not just specify a property name inline for trackBy ?

Angular Solutions

Solution 1 - Angular

As pointed out in @Eric comment, and after lots of reading and playing around, here is how to use trackBy in angular2

  1. the first thing you need to know its not same syntax as angular1, now you need to separate it from the for loop with a ;.

Usage 1: Track by property of object

 // starting v2. 1 this will throw error, you can only use functions in trackBy from now on

<ion-card *ngFor="let post of posts;trackBy:post?.id">
</ion-card> // **DEPRECATED**
<ion-card *ngFor="let post of posts;trackBy:trackByFn">

here you ask angular2 to

  1. create a local variable post;
  2. you tell trackBy to wait untill this local variable is ready "you do that by using elvis operator 'the question mark after the variable name', then use its id as tracker.


// starting v2. 1 this will throw error, you can only use functions in trackBy from now on

*ngFor="#post of posts;trackBy:post?.id"

is what same as angular's 1

ng-repeat="post in posts track by"

Usage 2: Track using your own Function

	template: `
			<li *ngFor="#post of posts;trackBy:identify">
export class HomeworkAddStudentsPage {
    constructor() {
		this.posts = [  {id:1,data:'post with id 1'},
						{id:2,data:'post with id 2'} ];
      //do what ever logic you need to come up with the unique identifier of your item in loop, I will just return the object id.


trackBy can take a name of callback, and it will call it for us supplying 2 parameters: the index of the loop and the current item.

To achieve the same with Angular 1, I used to do:

<li ng-repeat="post in posts track by identify($index,post)"></li>

  $scope.identify = function(index, item) {return};

Solution 2 - Angular

As you already recognized, using a function is the only way to use trackBy in Angular 2

<ion-card *ngFor="#post of posts;trackBy:identify"></ion-card>

The official documentation states that

All the other information about <ion-card *ngFor="let post of posts;trackBy:post?.id"></ion-card> is wrong. Starting with Angular 2.4.1 this will also throw an error in the application.

Solution 3 - Angular

Just want to add few examples (Angular 2+) in addition to others' answer to make the use of trackBy clear.

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:

An example will explain it better.


   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) {

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


Example of *ngFor without trackBy:

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

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:

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

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) {

Solution 4 - Angular

The concept behind trackBy:

  1. ngFor of angular automatically optimizes the display of modified/created/deleted objects by tracking through object identity. So, if you create all new objects in the list and then use ngFor, it will render whole list.

  2. Let's consider a scenario where despite of all ngFor optimizations, the rendering is still taking time. In that case we use trackBy. So that, we can provide another parameter to track objects than the object identity which is a default tracking criteria.

A running example:

<!DOCTYPE html>

    <title>Angular 2.1.2 + TypeScript Starter Kit</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="[email protected]/dist/zone.js"></script>
    <script src="[email protected]/Reflect.js"></script>
    <script src="[email protected]/dist/system.js"></script>
    <script src="[email protected]/lib/typescript.js"></script>
    <script src="config.js"></script>



Solution 5 - Angular

This is Angular global trackBy property directive with strict type checking, for handle trackBy entirely in the template by passing a property:

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

    selector: '[ngForTrackByProperty]'
export class NgForTrackByPropertyDirective<T> {

    @Input() ngForOf!: NgIterable<T>;
    @Input() ngForTrackByProperty!: keyof T;

    constructor(@Host() ngForOfDir: NgForOf<T>) {
        ngForOfDir.ngForTrackBy = (_, item: T): T[keyof T] => item[this.ngForTrackByProperty];


import { Component } from '@angular/core';

interface Item { 
  id: number; 
  name: string;

  selector: 'app-root',
  template: `
      <li *ngFor="let item of list; trackByProperty: 'id'">
        {{ }} {{ }}
export class AppListComponent {
  public list: Array<Item> = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' },




All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionZalabozaView Question on Stackoverflow
Solution 1 - AngularZalabozaView Answer on Stackoverflow
Solution 2 - AngularVolker AndresView Answer on Stackoverflow
Solution 3 - AngularEmericView Answer on Stackoverflow
Solution 4 - AngularRuchi WadhwaView Answer on Stackoverflow
Solution 5 - AngularSimone NigroView Answer on Stackoverflow