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.