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