How To Use trackBy With ngFor In Angular 8

Introduction

 

In this article, we will learn how to improve our application performance using trackBy.

 

Example

 

If we want to display data in the collections for the first time, it will go through DOM manipulation after updating the records. Then the updated records remove all the DOM elements associated with the data and create them again. This problem creates Dom manipulations, which are expensive in our application.

 

TrackBy

 

TrackBy is used to track the latest value in the dom without refreshing the full dom element. It only updates the new data.

 

Prerequisites

• Basic knowledge of Angular
• Visual Studio Code must be installed
• Angular CLI must be installed
• Node JS must be installed

Create an Angular project

 

Step 1

 

Create a new Angular project using the following NPM command:

ng new trackByExample

Step 2

 

Now, let's create a new component using the following command:

ng g c trackBy

Step 3

 

Now open the trackby.component.html file and add the following code:

<div class="card">
  <div class="card-body pb-0">
    <h1 style="text-align: center;">Example with trackBy</h1>
    <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>Provider</th>
                    <th>P. Art. N</th>
                    <th>S. A/C</th>
                    <th>Price </th>
                  </tr>
                </thead>

                <tbody *ngFor="let product of products; let i = index;trackBy:trackByProductId">
                  <tr>
                    <td align="center">{{product.ArtNo}}</td>
                    <td>{{product.Brand}}</td>
                    <td>{{product.Provider}}</td>
                    <td>{{product.ProviderArtNo}}</td>
                    <td>{{product.SalesAccount}}</td>
                    <td>{{product.Price}}</td>
                  </tr>
                </tbody>
              </table>
              <button class="btn btn-primary" (click)="addNewProd()">Add new Product</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Step 4

 

The next step is to open the trackBy.component.ts file and add the following code:

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

@Component({
  selector: 'app-trackby-example',
  templateUrl: './trackby-example.component.html',
  styleUrls: ['./trackby-example.component.css']
})
export class TrackbyExampleComponent implements OnInit {
  products = [];
  country: any;
  priceToDisplay = [];

  constructor() {
  }
  ngOnInit() {
    this.products = [{
      'ArtNo': 1,
      'Brand': 'Apple',
      'Provider': 'Mr.Anil',
      'ProviderArtNo': 'Pr123',
      'SalesAccount': 'Sa456',
      'Price': 123000
    },
    {
      'ArtNo': 2,
      'Brand': 'One Plus',
      'Provider': 'Mrs.Kiran',
      'ProviderArtNo': 'Pr234',
      'SalesAccount': 'Sa345',
      'Price': 52300
    }, {
      'ArtNo': 3,
      'Brand': 'Samsung',
      'Provider': 'Mr.Ramesh',
      'ProviderArtNo': 'Pr345',
      'SalesAccount': 'Sa234',
      'Price': 23000
    }, {
      'ArtNo': 4,
      'Brand': 'Mi',
      'Provider': 'Mr.Suresh',
      'ProviderArtNo': 'Pr456',
      'SalesAccount': 'Sa123',
      'Price': 12300
    }];
  }

  addNewProd() {
    this.products = [{
      'ArtNo': 1,
      'Brand': 'Apple',
      'Provider': 'Mr.Anil',
      'ProviderArtNo': 'Pr123',
      'SalesAccount': 'Sa456',
      'Price': 123000
    },
    {
      'ArtNo': 2,
      'Brand': 'One Plus',
      'Provider': 'Mrs.Kiran',
      'ProviderArtNo': 'Pr234',
      'SalesAccount': 'Sa345',
      'Price': 52300
    }, {
      'ArtNo': 3,
      'Brand': 'Samsung',
      'Provider': 'Mr.Ramesh',
      'ProviderArtNo': 'Pr345',
      'SalesAccount': 'Sa234',
      'Price': 23000
    }, {
      'ArtNo': 4,
      'Brand': 'Mi',
      'Provider': 'Mr.Suresh',
      'ProviderArtNo': 'Pr456',
      'SalesAccount': 'Sa123',
      'Price': 12300
    }, {
      'ArtNo': 5,
      'Brand': 'Redmi',
      'Provider': 'Ms.Swara',
      'ProviderArtNo': 'Pr567',
      'SalesAccount': 'Sa121',
      'Price': 13000
    }];
  }
  trackByProductId(index: number, product: any) {
    return product.ArtNo;
  }
}

Output

 

In the above image, we can see that after we click on the Add New Product button, it will remove all the elements from the DOM and recreates it again, as we can see on the right-hand side of the above image.

 

In the above image, we can see that after clicking on Add new Product button, only the updated record is added to the DOM as we used trackBy in the structural directive to track the updated record. If we click on the button again, then it will not reflect the change as it's already updated. This only improves our application performance.

 

Conclusion

 

In this article, we learned how to use trackBy with *ngFor, which helps to improve performance.

 

I hope you have enjoyed this article as much as I have enjoyed writing and coding the examples.

 

Please let me know how to improve it.