TrackBy with *ngFor in Angular 9 : Example

This tutorial guides you on how to use TrackBy with *ngFor in Angular 9 application. We also learn how the performance of ngFor can be increased by using TrackBy function in our component class.

TrackBy with *ngFor in Angular 9

Before you get in to on how to use TrackBy with *ngFor in Angular, you should know what impact it would create using them in the angular application.

For example, when you add, move or remove items or elements in the iterating, the *ngFor directive must re-render the appropriate DOM nodes. This will impact the performance in DOM, if you re-render all the nodes including the one which is not changed. Therefore, to improve the performance only the nodes that have changed has to be re-rendered.

When you use this TrackBy function, the *ngFor directive uses the result of this TrackBy function to identify the item/element node that is changed instead of identifying the whole object (jsonArray) itself.

This function has two arguments, the iteration index(index of the element) and the associated node/element data (element itself).

For example, the TrackBy function that you need to create in your component looks like below.

trackJsonArrayElement(index: number, element: any){
   return element ? element.uid: null;
}

Where “uid” is the field used to identify each item/element node. Note, because the value of “uid” field won’t change when the reference changes, angular would identify them and apply the optimization.

And this function returns unique value of the element i.e., uid. You can also return hash of the element instead of uid.

Example : TrackBy with *ngFor

Now, let’s get in to the implementation part. You need to implement TrackBy function (trackJsonArrayElement()) as shown below in the component class.

mycomponent.component.ts

import { Component } from '@angular/core';

@Component({
	
	selector:'app-mycomp',
	templateUrl:'./mycomponent.component.html',
	
})

export class MycomponentComponent {

	jsonArray = [
		{
		  uid: '10',
		  age: 22,
		  username: 'John Paul',
		},
		{
		  uid: '11',
		  age: 35,
		  username: 'Peter Jackson',
		},
		{
		  uid: '12',
		  age: 30,
		  username: 'Will Smith',
		},
		{
		  uid: '13',
		  age: 25,
		  username: 'Peter Paul',
		},
		{
		  uid: '14',
		  age: 34,
		  username: 'Johnson Peter',
		},
		{
		  uid: '15',
		  age: 30,
		  username: 'Eric Smidth',
		},
	  ]

	  trackJsonArrayElement(index: number, element: any){
			return element ? element.uid: null;
	  }
	
}

And we need to tell ngFor directive that trackJsonArrayElement() function is used to track the element. Therefore, you need to use this function with ngFor directive as shown below.

<li *ngFor="let element of jsonArray; trackBy: trackJsonArrayElement">{{element.username}}, {{element.uid}}, {{element.age}}</li>

Your component template should look like below.

mycomponent.component.html

<p>This is My First Component</p>

<ul>

    <li *ngFor="let element of jsonArray; trackBy: trackJsonArrayElement">
       {{element.username}}, {{element.uid}}, {{element.age}}
    </li>

</ul>

And use the component selector ‘app-mycomp‘ in your parent component (app.component.html).

app.component.html

<div class="container">
	<div class="row">
		<div class="col-xs-12">			
			<h3>My First Component !</h3> 
			<hr>
			<app-mycomp></app-mycomp>		
		</div>
	</div>
</div>

Finally, when you run the above example you should see the following output in the browser.

Output

That’s it, you had learnt how to use track by with *ngFor in Angular 9 application. Hope it helped 🙂

Also See: