Angular  

Looping Built-In Directives Like NgFor And Getting An Index - Angular

Introduction

 
In this article, you will see the Looping Built-in Directives like NgFor, Getting an Index and NgNonBindable along with the examples.
 
Article Overview
  • Background
  • Prerequisites
  • NgFor
  • Getting an Index
  • NgNonBindable
  • Summary
Background
  • Build-in directives are attributes which we add to HTML element to give dynamic behaviour.
  • Angular provides various built-in directives.
  • In this article we’re going to cover conditional directives such as NgFor, Getting an Index and NgNonBindable along with examples of how to use them.
Prerequisites
  • You should have a basic knowledge of Angular.

NgFor

 
It is used to repeat a given DOM element (or a collection of DOM elements) and pass an element of the array on each iteration.
 
Syntax
 
*ngFor="let item of items" 
  • let item syntax specifies a (template) variable that’s receiving each element of the items array.
  • items is the collection of items from your controller.
Basic Simple Example
 
Declare an array of members on our component controller,
  1. this.members = ['Sachin', Rahul', 'Mike'];  
In template use it with the following HTML snippet,
  1. <h4 class="ui horizontal divider header">List of members</h4>  
  2. <div class="ui list" *ngFor="let m of members">  
  3.    <div class="item">{{ m }}</div>  
  4. </div>  
Example of Iterate through an Array of Objects
 
Declare an array of objects of members on our component controller,
  1. this.members = [  
  2.    { name: 'Sachin', age: 25, city: 'Mumbai' },  
  3.    { name: 'Rahul', age: 22, city: 'Delhi' },  
  4.    { name: 'Mike', age: 24, city: 'London' }  
  5. ];  
Now, render the data,
  1. <h4 class="ui horizontal divider header">List of members</h4>  
  2. <table class="ui celled table">  
  3.    <thead>  
  4.       <tr>  
  5.          <th>Name</th>  
  6.          <th>Age</th>  
  7.          <th>City</th>  
  8.       </tr>  
  9.    </thead>  
  10.    <tr *ngFor="let m of members">  
  11.       <td>{{ m.name }}</td>  
  12.       <td>{{ m.age }}</td>  
  13.       <td>{{ m.city }}</td>  
  14.    </tr>  
  15. </table>  
Example of Iterate through a Nested Array of Objects
 
Declare a new array of objects,
  1. this.members = [  
  2.    {  
  3.       city: 'Mumbai',  
  4.       peoples: [  
  5.          { name: 'Sachin', age: 25 },                   { name: 'Ajay', age: 27 }  
  6.       ]  
  7.    },  
  8.    {  
  9.       city: 'Delhi',  
  10.       peoples: [  
  11.          { name: 'Rahul', age: 22 },  
  12.          { name: 'Axay', age: 25 }  
  13.       ]  
  14.    }  
  15. ];  
Template Code
  1. <h4 class="ui horizontal divider header">Nested data</h4>  
  2. <div *ngFor="let member of members">  
  3.    <h2 class="ui header">{{ member.city }}</h2>  
  4.    <table class="ui celled table">  
  5.       <thead>  
  6.          <tr>  
  7.             <th>Name</th>  
  8.             <th>Age</th>  
  9.          </tr>  
  10.       </thead>  
  11.       <tr *ngFor="let people of member.peoples">  
  12.          <td>{{ people.name }}</td>  
  13.          <td>{{ people.age }}</td>  
  14.       </tr>  
  15.    </table>  
  16. </div>  
Here, we have used two loops one for city and another for people.
  • <div *ngFor="let member of members">
  • <tr *ngFor="let people of member.peoples">

Getting an Index 

  • Some times we need to use the index of each item when we’re iterating an array.
  • Get the index by appending the syntax let idx = index to the value of our ngFor directive, separated by a semi-colon.
  • While doing this, ng2 will assign the current index into the variable which is provided (in this case, the variable idx).
  • Note, like JavaScript, the index is starts with zero. Hence, index for first element is 0, 1 for the second and etc.
Example of using Index
  1. <div class="ui list" *ngFor="let city of cities; let num = index">  
  2.    <div class="item">{{ num+1 }} - {{ city }}</div>  
  3. </div>  

NgNonBindable

 
It is used when we want tell Angular not to compile or bind a particular section of the page.
 
Example of NgNonBindable
  1. <div class='ngNonBindableDemo'>  
  2.    <span class="bordered">{{ content }}</span>  
  3.    <span class="pre" ngNonBindable>  
  4.       This is what {{ content }} rendered  
  5.    </span>  
  6. </div>  

Summary

 
Now, I believe you know the key important things about the Built-in Directives, NgFor, Getting an index, and NgNonBindable in Angular.

Membership not found