Best practice – using the TrackBy property – Components and Pages

After the *ngIf directive, the ngFor directive will probably be the directive that you will use the most in your Angular projects. Although simple, this directive can hide a performance and perception problem in the frontend that will occur for your user.
To demonstrate this, let’s add a new list button, simulating a list update coming from the backend.
In the diary.component.ts file, add the following method:

newList() {
this.exerciseList = [
{ id: ‘1’, date: new Date(), exercise: ‘Deadlift’, reps: 15, sets: 3 },
{ id: ‘2’, date: new Date(), exercise: ‘Squat’, reps: 15, sets: 3 },
{ id: ‘3’, date: new Date(), exercise: ‘Barbell row’, reps: 15, sets: 3 },
{ id: ‘4’, date: new Date(), exercise: ‘Leg Press’, reps: 15, sets: 3 },
];
}

This method replaces the array with this new array, which contains the same elements but with one more item.
Let’s add the button to the list template:
<br>
<br>
  <button
    class=”rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700″
    (click)=”newList()”
   >
     Server Sync
  </button>Server Sync

When we click on the Server Sync button, the entire item list is rendered, even though the new list is identical to the original except for the addition of a new item.

Figure 4.3 – Chrome DevTools
For a few items, this may not necessarily be a problem, but for a larger list, this unnecessary rendering may offend the performance perception our user will have of our application.
To improve this kind of case, the ngFor directive has the TrackBy option. Let’s refactor our code to demonstrate this option; first, let’s create a method for the exercise list component:

itemTrackBy(index: number, item: ExerciseSet) {
return item.id;
}

This method tells Angular how to identify the single element in a collection that it will iterate through the *ngFor directive. Think of it as the primary key of the collection.
In the component’s template, let’s change the ngFor configuration:
<section class=”mb-8″>
  <h2 class=”mb-4 text-xl font-bold”>List of entries</h2>
  <ul class=”rounded border shadow”>
<li *ngFor=”let item of exerciseList; index as i; trackBy: itemTrackBy”>
      <app-entry-item [exercise-set]=”item” />
    </li>
  </ul>
</section>

Here, we are telling ngFor to render based on the id property of the object. Running it again in the browser with Chrome DevTools, we see that now only the item with the id attribute is rendered on the page.
The TrackBy attribute, in addition to avoiding unnecessary rendering, has the following advantages:
• Enables animations when removing and adding items from the collection
• Retains any DOM-specific UI state, such as focus and text selection, when the collection changes
Now that we’ve learned about the use of this ngFor property, let’s study how we can architect the composition of our components and pages.