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

Angular ngFor Directive-Part 1 Examples

 *ngFor directive:

-----------------
*this is used to read a collection in sequential order
*syntax:
   <tagname *ngFor="let <varname> of <collectionname>;
                    let <indexvar>=index;
                    let <evenvar>=even;
                    let <oddvar>=odd;
                    let <firstvar>=first;
                    let <lastvar>=last; ">
   </tagname>

*ngFor will create a template[html tag] dynamically towards each
 element present with in a collection
*ngfor is providing set of keywords:

 1.index-it will provide index number[starts with 0]
 2.even -it will provide true|false
         true--even index element
 3.odd  -it will provide true|false
         true--odd index element
 4.first-it will provide true|false
         true-first element index
 5.last -it will provide true|false
         true-last element index

.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>
        <tr *ngIf="!Product || Product.length==0">
            <td colspan="3">
                No Products to display
            </td>
        </tr>
    </tbody>
</table>


Prod.ts Changes

export class Prods {
    public Name;
    public Price;
    public Photo;
    constructor(name: string,price: number,photo: string)
    {
        this.Name=name;
        this.Price=price;
        this.Photo=photo;
    }
}

.ts Changes

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

@Component({
  selector: 'app-ngfordemo',
  templateUrl: './ngfordemo.component.html',
  styleUrls: ['./ngfordemo.component.css']
})
export class NgfordemoComponent {
  public Product: Prods[] =[
    new Prods('Samsung', 122,'assets\\Samsung.jpg'),
    new Prods('Sony', 1252,'assets\\Sony.jpg'),
    new Prods('Iphone', 1232,'assets\\Iphone.jpg'),
    new Prods('OnePlus', 1822,'assets\\OnePlus.jpg')
  ];
}


Understand Above Code

Here, the ngFor directive is used to iterate over a collection. In this example, the collection is an array of products.
As the ngFor directive is a structural directive, so it is prefixed with * (star). So, the point that you need to remember is, all the structural directive are prefixed with a *.
*ngFor=’let prod of Product’ – In this statement, the ‘prod‘ is called template input variable, which can be accessed by the <tr> element and any of its child elements.
The ngIf structural directive displays the row “No Products to display” when the products property does not exist.

AppModule.ts














Index.html













Output































Now, i want to get the index Number,

We can get the index of an item in a collection using the index property of the ngFor directive

.HTML Changes


<table>
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Product Price</th>
            <th>Product Photo</th>
            <th>Index</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let prod of Product ;let i=index'>
            <td>{{prod.Name}}</td>
            <td>{{prod.Price}}</td>
            <td><img [src]="prod.Photo" width="100" height="100" > </td>
            <td>{{i}}</td>
        </tr>
        <tr *ngIf="!Product || Product.length==0">
            <td colspan="4">
                No Products to display
            </td>
        </tr>
    </tbody>
</table>


Output
























identify the first and the last element
Make the below changes to the .html file


.html

<table>
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Product Price</th>
            <th>Product Photo</th>
            <th>Index</th>
            <th>IsFirst</th>
            <th>IsLast</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let prod of Product ;let i=index;let isFirst = first; 
        let isLast = last'>
            <td>{{prod.Name}}</td>
            <td>{{prod.Price}}</td>
            <td><img [src]="prod.Photo" width="100" height="100" > </td>
            <td>{{i}}</td>
            <td>{{isFirst}}</td>
            <td>{{isLast}}</td>
        </tr>
        <tr *ngIf="!Product || Product.length==0">
            <td colspan="4">
                No Products to display
            </td>
        </tr>
    </tbody>
</table>


Output






















IsEven and IsOdd 

.html Changes


<table>
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Product Price</th>
            <th>Product Photo</th>
            <th>Index</th>
            <th>IsFirst</th>
            <th>IsLast</th>
            <th>IsEven</th>
            <th>IsOdd</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let prod of Product ;let i=index;let isFirst = first; 
        let isLast = last ;let isEven = even; let isOdd = odd'>
            <td>{{prod.Name}}</td>
            <td>{{prod.Price}}</td>
            <td><img [src]="prod.Photo" width="100" height="100" > </td>
            <td>{{i}}</td>
            <td>{{isFirst}}</td>
            <td>{{isLast}}</td>
            <td>{{isEven}}</td>
            <td>{{isOdd}}</td>
        </tr>
        <tr *ngIf="!Product || Product.length==0">
            <td colspan="8">No Products to display</td>
        </tr>
    </tbody>
</table>


Output