Looping in Angular by *ngFor

Looping can be achieved by *ngFor directive

Syntax     *ngFor="let item of collection"

Here collection object may be your collection of any class or array
     item is the variable in which you will get each object which is available in your collection.


you can Refer on my Channel

                Shubh Techno Expert

https://youtu.be/3dYC1PTXmfI

Here is Example .

Salesperson.component.html 

<h1 style="text-align: center;">Looping through *ngFor</h1>

<div>
    <h1 align="center">Employee</h1>
    <table border="2" align="center">
        <thead>
            <th>Emp Name</th>
            <th>Emp Code</th>
            <th>Email</th>
            <th>Salary</th>
        </thead>
        <tbody>
            <tr *ngFor="let item of Empcollection">
                <td>{{item.EmpCode}}</td>
                <td>{{item.EmpName}}</td>
                <td>{{item.Email}}</td>
                <td>{{item.Salary}}</td>
            </tr>
        </tbody>

    </table>

Salesperson.component.ts 

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

@Component({

  selector: 'app-salesperson',

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

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

})

export class SalespersonComponent implements OnInit {

  constructor() { }

  ngOnInit() {

      }

      Empcollection: any =

      [

        { EmpCode: "E001",EmpName: "Nagendra",  Email: "Nagendra@test.com", Salary: 8000 },

        { EmpCode: "E002",EmpName: "Raj",  Email: "raj@test.com", Salary: 70000 },

        { EmpCode: "E003",EmpName: "Shubh",  Email: "Nagendra@test.com", Salary: 80000 },

        { EmpCode: "E004",EmpName: "Techno",  Email: "Shubh@test.com", Salary: 9000 }

  

      ]

     

}

You Can Subscribe my Channel for upcoming VDO related to Angular  Shubh Techno Expert