Angular ngRepeat Track by Index

1. Track by $index in AngularJS
2. Use Track by $index in AngularJS

This article helps you understand the ngRepeat track by $index and use it in your Angular applications.

Track by $index in AngularJS

Angular is a modern JavaScript framework with many built-in features. AngularJS provides two-way data binding, which means that any changes made to the model will be reflected in the view and vice versa.

It also provides ngRepeat, which repeats DOM elements for every item in an array or object. The ngRepeat track by $index allows you to specify which items should be repeated using their index number.

The ngRepeat is a directive that can be added to the HTML template of an Angular application. It is used for creating lists, and it can take an expression as an argument.

The ngRepeat expression takes two parameters: a variable name and a value for this variable name.

These variables are then iterated over, with each iteration being assigned to the variable one by one. The problem is that ngRepeat will not rebuild the DOM components for objects recently displayed.

We use the track by $index to overcome this problem.

The ngRepeat track by $index provides a unique identifier for each item in the list.

This identifier can be helpful when you want to access a particular item in the list or when you have an array of objects and need to access properties within those objects; this is incredibly beneficial.

The track by $index directive works as follows.

1. It assigns the same index to all children of the same parent.
2. It assigns sequential integers starting from 0 if the parent does not specify an index for its children.
3. The directive does not create new indexes for its children if it already specifies them.

Use Track by $index in AngularJS

This section shows how to use Angular track by $index in your Angular app with the help of an example.

Create a new project with the command below.

ng new angular-track-by-index

Add the following JavaScript code in the app folder.

 var app = angular.module('Adil',[]);
        app.controller('Demo',["$scope",function($scope){
            $scope.delft = [];
            $scope.add = function () {
                $scope.delft.push($scope.example );
            }
        }]);

We used $scope in JavaScript code, so what is $scope? In AngularJS, the $scope is a built-in object that holds application data and operations.

You can add attributes to a $scope object within a controller function and apply a value or function to them.

The $scope serves as a link between the controller and the view (HTML). It sends information from the controller to the view.

Add the following HTML Code.

<h3>Example of Angular track by index</h3>
<p>Write anything in the box and press enter, you will understand the concept of Angular track by index</p>
<div ng-app="Adil">
  <div class="Demo" ng-controller="Demo">
    <form action="
               " ng-submit="add()">
      <input type="text" ng-model="example" />
    </form>
    <p ng-repeat="list in delft track by $index">{{list}}</p>
  </div>
</div>

In this article, we have seen that the ngRepeat track by $index is one of the essential features of Angular that allows developers to iterate through an array and render the same HTML for each item in the array.

With this directive, developers can easily create a reusable template for any HTML list.

Click here to check the live demonstration of the code as mentioned above.