Mastering Angular's ngFor with Index Tracking and Data Attributes

Introduction

In Angular, iterating over arrays or lists is a common task. The ngFor directive provides a powerful way to render lists dynamically by repeating HTML elements based on the items of an array or list. One advanced feature involves using local variables within ngFor loops to track indices and manipulate data attributes. This tutorial will guide you through effectively utilizing ngFor with index tracking and binding these values to custom data attributes in Angular.

Understanding ngFor Directive

The ngFor directive is used to display a list of items by iterating over an array or iterable object. It follows the syntax:

<div *ngFor="let item of items">
    {{item}}
</div>

Here, items represents the collection you want to iterate over, and item is each individual element from that collection.

Using Local Variables with ngFor

Angular allows us to declare local variables within an ngFor loop. This can be done using the following syntax:

<div *ngFor="let item of items; let i = index">
    {{i}}: {{item}}
</div>

In this example:

let item assigns each element from items to a local variable named item.
let i = index introduces another local variable, i, that tracks the current index of the iteration.

Binding Index Values to Data Attributes

To bind these index values to custom data attributes, use Angular’s property binding syntax [attr.data-index]="i". This is particularly useful for attaching additional metadata or information directly to your HTML elements. Here’s how you can do it:

For Angular 2-4 and AngularJS

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

For Angular 5 and Above

Angular introduced a slightly different syntax for aliasing the index:

<ul>
    <li *ngFor="let item of items; index as i" [attr.data-index]="i">
        {{item}}
    </li>
</ul>

In both cases, [attr.data-index] binds the local variable i, which tracks the current loop’s index, to a custom HTML attribute called data-index.

Advanced Usage: Other Local Variables

Angular provides other local variables that can be used with ngFor, enhancing your control over list rendering:

$implicit: Represents each item in the iterable.
ngForOf: The value of the iterable expression (useful for complex expressions).
index: Tracks the index of the current iteration.
count: Provides the length of the iterable.
first/last: Boolean values indicating if an element is the first or last in the list.
even/odd: Boolean values to check if an index is even or odd.

Example: Displaying Dividers for All but Last Item

You might want to add separators between items, excluding the last one. This can be achieved using the last keyword:

<div *ngFor="let item of items; let last = last">
    <divider *ngIf="!last"></divider>
    {{item}}
</div>