ngFor in Angular 4

ngFor Directive using for show list data.

—-html file (user.component)

<table class="table">
<tbody>
<tr *ngFor="let user of list;">
<td>{{user.name}}</td>
<td>{{user.joining_date}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>

—-html file (user.component)

list = [{
    name: "Jon", 
    joining_date:"23/10/2015", 
    age: 23
    },
    {
    name:"Viki", 
    joining_date:"24/01/2015", 
    age: 20
    },
    {
    name: "Abc", 
    joining_date:"25/10/2015", 
    age: 43
    },{
    name: "XYZ", 
    joining_date:"28/10/2015", 
    age: 21
    }];


Getting the Index when using ngFor

—-html file (user.component)

<table class="table">
<tbody> 
<tr *ngFor="let user of list; let i = index"> 
<td>{{i}}</td> 
<td>{{user.name}}</td> 
<td>{{user.joining_date}}</td> 
<td>{{user.age}}</td> 
</tr> 
</tbody> 
</table>

Leave a Reply

Your email address will not be published. Required fields are marked *