Angular ngFor Directive-Part 2 Examples (ngFor trackBy)

Please refer previous example 

https://dotnetbyudayrajakonda.blogspot.com/2023/10/angular-ngfor-directive.html

 .Html 

<ul style="font-size:x-large">

    <li style="color:green">{{courses[0]}}</li>

    <li style="color:red">{{courses[1]}}</li>

    <li style="color:green">{{courses[2]}}</li>

    <li style="color:red">{{courses[3]}}</li>

    </ul>

    <ul style="font-size:x-large">

        <li *ngFor="let c of courses;let iseven=even"

          [style.color]="iseven?'green':'red'">

          {{c}}

        </li>

        </ul>

.ts

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

@Component({

  selector: 'app-ngfordemo',

  templateUrl: './ngfordemo.component.html',

  styleUrls: ['./ngfordemo.component.css']

})

export class NgfordemoComponent {

  courses:string[]=["angular","react","azure","python"];

}

Output

note:
-----
*in the above case, ngfor will create li tag dynamically towards
 each element[coursename] present with in courses array,style binding
 will apply color[green|red] based on even index|odd index element

Example with 

ngFor trackBy

The Angular trackBy is used to improve the performance of an angular application.

Suppose, we have some data coming from some API and we are storing these data into some kind of collection like an array and then we need to update these data over the webpage using ngFor directive. 

By default, what angular framework will do is, it will remove all the DOM elements that are associated with the data and will create them again in the DOM tree even if the same data is coming. That means a lot of DOM Manipulation will happen in the background if a large amount of data coming from the API again and again.

Example

.html

<table>

    <thead>

        <tr>

            <th>Product Name</th>

            <th>Product Price</th>

            <th>Product Photo</th>

        </tr>

    </thead>

    <tbody>

        <tr *ngFor='let prod of Product'>

            <td>{{prod.Name}}</td>

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

            <td><img [src]="prod.Photo" width="100" height="100" > </td>

        </tr>

    </tbody>

</table>

<br />

<button (click)='getProducts()'>Refresh Products</button>

.ts Changes

export class NgfordemoComponent {

  public Product: Prods[] =[

    new Prods('Samsung', 122,'assets\\Samsung.jpg'),

    new Prods('Sony', 1252,'assets\\Sony.jpg'),

  ];

  getProducts(): Prods[] {

    return this.Product = [

      {

        Name: 'Samsung', Price: 122, Photo: 'assets\\Samsung.jpg'

      },

      {

        Name: 'Sony', Price: 1252, Photo: 'assets\\Sony.jpg'

      },

      {

        Name: 'Iphone', Price: 1232, Photo: 'assets\\Iphone.jpg'

      },

      {

        Name: 'Iphone', Price: 1232, Photo: 'assets\\Iphone.jpg'

      },

    ];

}

}

Output

When we click on Refresh Products, we can notice in the Element tab that <tr> elements are briefly highlighted indicating that they are destroyed and recreate

This is because Angular Framework by default keeps track of the objects using the object references. So, when you click on the “Refresh Products” button, it will get different object references and as a result, Angular has no other choices but to delete all the old DOM elements and insert the new DOM elements. Image what could happen if the data size is huge.

To solve this, we have got trackBy