*ngFor Structural Directive with Local Variables And trackBy In Angular

There are couple of local variables with ngFor built-in structural directive provided by Angular 2, which are used for getting the index of current element while iteration and for getting last or first element from the collection etc. as mentioned below –

1. Index – Used for provide the index for current element while iteration.
2. First – Return true if current element is first element in the iteration otherwise false.
3. Last – Return true if current element is last element in the iteration otherwise false.
4. Even – Return true if current element is even element based on index in the iteration otherwise false.
5. Odd – Return true if current element is odd element based on index in the iteration otherwise false.

Let’s understand all these local variables with the help of an example –

Here, I am using the same student application which I used in my previous article for *ngFor directive. Look at my previous article on *ngFor directive.

Index with *ngFor directive

Index gives the index of current element in the iteration. Let’s look into example below. I have a list of students which I am displaying in table on web page as below. Now, I want to add one more column of index at first position, which will represent of index value of each item like below,



Let’s add the code for displaying the index of the current item in student.component.html file and run it for the expected output – (highlighted code)

<table>
    <thead>
        <tr>
            <th>Index</th>
            <th>Student ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Age</th>
            <th>Course</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let s of students;let i=index">
            <td>{{i}}</td>
            <td>{{s.studentID}}</td>
            <td>{{s.studentName}}</td>
            <td>{{s.gender}}</td>
            <td>{{s.age}}</td>
            <td>{{s.course}}</td>
        </tr>
    </tbody>
</table>

Output



First & Last with *ngFor directive

First & Last both provides the Boolean value. Returns true if current element value is first element or last element otherwise false. Let’s look into highlighted code & example below,

<th>Course</th>
<th>First Element</th>
<th>Last Element</th>
</tr>
</thead>
<tbody>
    <tr *ngFor="let s of students;let i=index;let f=first;let l=last">
        <td>{{i}}</td>
        <td>{{s.studentID}}</td>
        <td>{{s.studentName}}</td>
        <td>{{s.gender}}</td>
        <td>{{s.age}}</td>
        <td>{{s.course}}</td>
        <td>{{f}}</td>
        <td>{{l}}</td>
    </tr>
</tbody>
</table>

Output



Even & Odd with *ngFor directive

Even & odd both provides the Boolean value. Returns true if current element value is even element based on index or odd element based on index, otherwise false. Let’s look into highlighted code & example below,

<th>Last Element</th>
<th>Even Element</th>
<th>Odd Element</th>
</tr>
</thead>
<tbody>
    <tr *ngFor="let s of students;let i=index;let f=first;let l=last;let ev=even;let od=odd">
        <td>{{i}}</td>
        <td>{{s.studentID}}</td>
        <td>{{s.studentName}}</td>
        <td>{{s.gender}}</td>
        <td>{{s.age}}</td>
        <td>{{s.course}}</td>
        <td>{{f}}</td>
        <td>{{l}}</td>
        <td>{{ev}}</td>
        <td>{{od}}</td>
    </tr>
</tbody>
</table>

Output



trackBy with *ngFor directive

To iterate over a collection in Angular 2, I used *ngFor directive in above example.

Let’s understand with the same example why we needed trackBy function with *ngFor directive,

Suppose we have some data coming from some API request into the collection and we need to change the data over the web page using ngFor directive. In this case, Angular 2 will remove all the DOM elements that associated with the data and will create them again in the DOM tree, even the same data is coming (as shown in below screenshot). That means a lot of Dom manipulations will happen if a large amount of data coming from the API.



The solution is, we can use trackBy function, which will be helpful for Angular to track the items which have been added or removed.

TrackBy function will take two arguments first is index and second is current item and we can return the unique identifier as a return argument.

Let’s add the below function into student.component.ts file and look now,

trackByStudentID(index: number, student: any): string {
    return student.studentID;
}

Updated student.component.ts code file,

export class StudentListComponent {
    students: any[];
    constructor() {
        this.students = [{
            studentID: 1,
            studentName: 'Steve',
            gender: 'Male',
            age: 35,
            course: 'MCA'
        }, {
            studentID: 2,
            studentName: 'Bobby',
            gender: 'Male',
            age: 32,
            course: 'MBA'
        }, {
            studentID: 3,
            studentName: 'Rina',
            gender: 'Female',
            age: 45,
            course: 'B.Tech'
        }, {
            studentID: 4,
            studentName: 'Alex',
            gender: 'Female',
            age: 24,
            course: 'M.Tech'
        }, ];
    }
    getStudents(): void {
        this.students = [{
            studentID: 1,
            studentName: 'Steve',
            gender: 'Male',
            age: 35,
            course: 'MCA'
        }, {
            studentID: 2,
            studentName: 'Bobby',
            gender: 'Male',
            age: 32,
            course: 'MBA'
        }, {
            studentID: 3,
            studentName: 'Rina',
            gender: 'Female',
            age: 45,
            course: 'B.Tech'
        }, {
            studentID: 4,
            studentName: 'Alex',
            gender: 'Female',
            age: 24,
            course: 'M.Tech'
        }, {
            studentID: 5,
            studentName: 'Rahul',
            gender: 'Male',
            age: 26,
            course: 'MCA'
        }, ];
    }
    trackByStudentID(index: number, employee: any): string {
        return employee.studentID;
    }
}

Let’s add trackBy function in student.component.html view file,

<th>Odd Element</th>
</tr>
</thead>
<tbody>
    <tr *ngFor="let s of students;let i=index;let f=first;let l=last;let ev=even;let od=odd;trackBy:trackByStudentID">
        <td>{{i}}</td>
        <td>{{s.studentID}}</td>
        <td>{{s.studentName}}</td>
        <td>{{s.gender}}</td>
        <td>{{s.age}}</td>
        <td>{{s.course}}</td>
        <td>{{f}}</td>
        <td>{{l}}</td>
        <td>{{ev}}</td>
        <td>{{od}}</td>
    </tr>
</tbody>
</table> <br /> <button (click)='getStudents()'>Get More Students</button>

Let’s look now at output and DOM elements in developer tools,



In the above example, on clicking "Get More Students" button, all the DOM elements are not affected, but only last one element has changed color of <tr> tag. That means Angular is now able to track all the items in the collection with the help of trackBy function.

Summary

This article described how to use ngFor local variables and trackBy function with ngFor directive; why we need trackBy function; and how Angular tracks all the elements with the help of trackBy function.

To learn Angular 2 ngFor Directive, click the below link, 

• Learn Angular *ngFor Directive

Write to me in comment box in case you need any help or you have any questions or concerns. Have a great day!