Looping Built-In Directives Like NgFor And Getting An Index

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

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

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,

In template use it with the following HTML snippet,

Example of Iterate through an Array of Objects

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

Now, render the data,

Example of Iterate through a Nested Array of Objects

Declare a new array of objects,

Template Code

Here, we have used two loops one for city and another for people.

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

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

Example of NgNonBindable

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