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,

this.members = ['Sachin', Rahul', 'Mike'];

In template use it with the following HTML snippet,

<h4 class="ui horizontal divider header">List of members</h4>
<div class="ui list" *ngFor="let m of members">
   <div class="item">{{ m }}</div>
</div>

Example of Iterate through an Array of Objects

 

Declare an array of objects of members on our component controller,

this.members = [
   { name: 'Sachin', age: 25, city: 'Mumbai' },
   { name: 'Rahul', age: 22, city: 'Delhi' },
   { name: 'Mike', age: 24, city: 'London' }
];

Now, render the data,

<h4 class="ui horizontal divider header">List of members</h4>
<table class="ui celled table">
   <thead>
      <tr>
         <th>Name</th>
         <th>Age</th>
         <th>City</th>
      </tr>
   </thead>
   <tr *ngFor="let m of members">
      <td>{{ m.name }}</td>
      <td>{{ m.age }}</td>
      <td>{{ m.city }}</td>
   </tr>
</table>

Example of Iterate through a Nested Array of Objects

 

Declare a new array of objects,

this.members = [
   {
      city: 'Mumbai',
      peoples: [
         { name: 'Sachin', age: 25 },                   { name: 'Ajay', age: 27 }
      ]
   },
   {
      city: 'Delhi',
      peoples: [
         { name: 'Rahul', age: 22 },
         { name: 'Axay', age: 25 }
      ]
   }
];

Template Code

<h4 class="ui horizontal divider header">Nested data</h4>
<div *ngFor="let member of members">
   <h2 class="ui header">{{ member.city }}</h2>
   <table class="ui celled table">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
         </tr>
      </thead>
      <tr *ngFor="let people of member.peoples">
         <td>{{ people.name }}</td>
         <td>{{ people.age }}</td>
      </tr>
   </table>
</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

<div class="ui list" *ngFor="let city of cities; let num = index">
   <div class="item">{{ num+1 }} - {{ city }}</div>
</div>

NgNonBindable

 

It is used when we want tell Angular not to compile or bind a particular section of the page.

 

Example of NgNonBindable

<div class='ngNonBindableDemo'>
   <span class="bordered">{{ content }}</span>
   <span class="pre" ngNonBindable>
      This is what {{ content }} rendered
   </span>
</div>

Summary

 

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