Loading
 
What's Next: View All Tutorial →

Angular Js 2 - ngFor Directive statement

A sample program to implement ngFor directive statement in Agular Js 2 ngFor directive is used to iterate the array and display it.   import { Component } from '@angular/core'; @Component({ selector: 'my-app', t...

Published Date: 06/12/2016  Last Modified Date: 06/12/2016    New Post



A sample program to implement ngFor directive statement in Agular Js 2

ngFor directive is used to iterate the array and display it.

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

@Component({
  selector: 'my-app',
  template: `<h1>ngFor output with array and class</h1>
  
      <ul>
        <li *ngFor="let item of items; let i = index">
         index:  {{i}}  value {{item}}
        </li>
      </ul>
      
      <table border="1">
         <th>Index</th>
         <th>If</th>
         <th>Name</th>
       <tr *ngFor="let emp of empList; let i = index">
         <td>{{i}}</td>
         <td>{{emp.empId}}</td>
         <td>{{emp.empName}}</td>
        </tr>
      </table>


      <ul>
        <li *ngFor="let json of jsoninput; let i = index">
          {{i}}  - {{json.id}} -  {{json.value}}
        </li>
      </ul>
  `
})
export class AppComponent { 
  
  items =[1,2,3,4];
  
  
  jsoninput= [{
    id:1,
    value: 'data1'
  },{
    id:2,
    value: 'data2'
  }]
  
  empList=[];
  
  constructor() {
       let a = new Employee();
       a.empId ='1001';
       a.empName = 'Jhon';
       this.empList.push(a);
       
       let b = new Employee();
       b.empId ='1002';
       b.empName = 'David';
       this.empList.push(b);
    }
}


class Employee{
  empId;
  empName;
  
}

Things to know:

*ngFor is the directive used to iterate the array, 

All the directive should start with the * in the html tag. 


 

Program Example:


https://plnkr.co/edit/6NjEShxrmcISw3wM7g1q?p=preview

 

Program Output:

 

ngFor output with array and class

  • index: 0 value 1
  • index: 1 value 2
  • index: 2 value 3
  • index: 3 value 4
Index If Name
0 1001 Jhon
1 1002 David
  • 0 - 1 - data1
  • 1 - 2 - data2



Example 2:

http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview
 
Awaiting for Administrator approval




← Back to list


Related Post




×