Trackby in ngFor Angular

  Angular Trackby option improves the Performance of the ngFor if the collection has a large no of items and keeps changing. This can significantly reduce the number of DOM manipulations required, especially in large lists.

Here's a brief overview of how to use trackBy:

Syntax

You can use trackBy by providing a function that returns a unique identifier for each item in the list. This function is typically defined in your component class.

Example

Suppose you have a list of items that you want to display:

// In your component.ts

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

@Component({

  selector: 'app-item-list',

  template: `

    <ul>

      <li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>

    </ul>

  `

})

export class ItemListComponent {

  items = [

    { id: 1, name: 'Item 1' },

    { id: 2, name: 'Item 2' },

    { id: 3, name: 'Item 3' }

  ];

  trackById(index: number, item: any): number {

    return item.id; // Return unique identifier

  }

}

How It Works

1. Define a Unique Identifier: The trackById function returns the unique id of each item. This helps Angular track which items have changed.

2. Use trackBy in *ngFor: Add trackBy: trackById to the *ngFor directive.

Benefits

• Performance: By using trackBy, Angular can skip re-rendering items that haven’t changed, which improves performance, especially with large datasets.
• Reduced Reconciliation: It minimizes the work done during change detection by only updating the items that have changed.

When to Use trackBy

You should consider using trackBy whenever you're rendering lists, particularly when:

• The list is large.
• The items in the list may change frequently.
• You want to improve the performance of your application.

Using trackBy is a best practice in Angular for rendering lists efficiently.