To run applications faster we need to check the performance of our app for that Angular has a method called trackBy. TrackBy keeps track of incoming data every time we request from an API. If we have some data from API requests to the collection and we need to change the data over the web page using ngFor directive here we will remove all DOM elements related to the data and create them again in the DOM tree. To use TrackBy you must have some Angular knowledge, Visual studio code, Node JS and Angular CLI installed in your system. 

Let’s create a new project in Angular using the NPM command.

ng new trackBy

Then create a new component using the following command.

ng g c trackBy-example

Open trackBy-example.component .html file and type the below given code in that file.

<h4 style="text-align: center;">{{SampleMessage}}</h4>    

<div class="row">    

  <div class="col-12 col-md-12">    

    <div class="card">    

      <div class="card-body position-relative">    

        <div class="table-responsive cnstr-record product-tbl">    

          <table class="table table-bordered heading-hvr">    

            <thead>    

              <tr>    

                <th width="50">Art.No </th>    

                <th>Brand</th>    

                <th>Price/Unit</th>    

                <th>Provider</th>    

                <th>P. Art. N</th>    

                <th>S. A/C</th>    

              </tr>    

            </thead>    

            <tbody>    

              <tr *ngFor="let product of companyProduct;">    

                <td align="center">{{product.ArtNo}}</td>    

                <td>{{product.Brand}}</td>    

                <td>{{product.Price }}</td>    

                <td>{{product.Provider}}</td>    

                <td>{{product.ProviderArtNo}}</td>    

                <td>{{product.SalesAccount}}</td>    

              </tr>    

            </tbody>    

          </table>    

          <button (click)='getNewCompanies()'>New Companies</button>    

        </div>    

      </div>    

    </div>    

  </div>    

</div>   

To apply trackBy function with structural directive ngFor see the below code.

<tr *ngFor="let product of companyProduct; trackBy:trackByArtNo"> 

1. 
   

In our file add the following code.

import { Component, OnInit } from '@angular/core';  
import { ProductsService } from '../product.service';  
  
@Component({  
  selector: 'app-trackby',  
  templateUrl: './trackby.component.html'  
})  
export class TrackbyComponent implements OnInit {  
  companyProduct: any[];  
  SampleMessage="Example of Angular Fetching records using TrackBy";  
  
  constructor(private productService: ProductsService) {  
  
  }  
  ngOnInit() {  
    this.companyProduct = this.productService.getAllProductsUsingTrackBy();  
  }  
  
  getNewCompanies(): void {  
    this.companyProduct = this.productService.getAllProductsUsingTrackByExample();  
  }  
  trackByArtNo(index: number, companyProduct: any): string {  
    return companyProduct.ArtNo;  
  }  
  
} 

TrackBy function takes two arguments and returns the unique identifier as return argument. The two arguments are index and current item.

trackByArtNo(index: number, companyProduct: any): string {    
   return companyProduct.ArtNo;    
 }

Now we will add the following lines of code to the product.services.ts file

import { Injectable } from '@angular/core';  
  
@Injectable()  
  
export class ProductsService {  
  employees: any[]; 
  
  constructor() {  
  }  
  
  getAllProductsUsingTrackBy() {  
    return this.employees = [  
      {  
        ProductId: 1,  
        ArtNo: "100",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 7810.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      },  
      {  
        ProductId: 1,  
        ArtNo: "101",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 2310.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      },  
      {  
        ProductId: 1,  
        ArtNo: "102",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 7810.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      },  
      {  
        ProductId: 1,  
        ArtNo: "103",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 5810.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      }  
    ];  
  }  
  
  getAllProductsUsingTrackByExample() {  
    return this.employees = [  
      {  
        ProductId: 1,  
        ArtNo: "100",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 7810.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      },  
      {  
        ProductId: 1,  
        ArtNo: "101",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 2310.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      },  
      {  
        ProductId: 1,  
        ArtNo: "102",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 7810.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      },  
      {  
        ProductId: 1,  
        ArtNo: "103",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 5810.23,  
        BuyAccount: "123",  
        SalesAccount: "321"  
      },  
      {  
        ProductId: 1,  
        ArtNo: "104",  
        Provider: "OppoProvider",  
        ProviderArtNo: "1Yu",  
        Brand: "Oppo",  
        Price: 4770.23,  
        BuyAccount: "143",  
        SalesAccount: "211"  
      },  
    ];  
  }  
  
} 

Final step is to run the project by typing the ‘npm start’ command. The displayed output will have a button called New Companies. If we click this a new entry will be added to the table. If we are using the normal ngFor directive without trackBY function Angular will erase all DOM elements and recreate them again in the DOM tree though the data is the same. This will slow down our applications performance. But if we have a trackBy function it will create a new DOM by adding only the new data.