Angular’s trackBy — easier than ever

Using trackBy is a typical solution to improve the performance of your Angular application.

This article does not cover how trackBy works, as there is already sufficient information available on this topic.

How does ChatGBT explain this?

Problem

Typically, when using trackBy in Angular, it is necessary to create a function that generates a unique value for each item. This method should be implemented in every component where trackBy is utilized.

Get Cornilov Dan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Let’s suppose we have a couple of components that need to render a list of items.

@Component({
  selector: 'app-cats',
  template: `
    <ul> 
      <li *ngFor="let item of items; trackBy: trackById">
    </ul>
  `,
  styleUrls: ['./cats.component.scss'],
})
export class CatsComponent {
  @Input() items: {id: number; name: string}[];

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

@Component({
  selector: 'app-dogs',
  template: `
    <ul> 
      <li *ngFor="let item of items; trackBy: trackByIndex">
    </ul>
  `,
  styleUrls: ['./dogs.component.scss'],
})
export class DogsComponent {
  @Input() items: string[];

 trackByIndex(index, item): number {
     return item.index; 
  }
}

As we can observe, there is a significant amount of boilerplate code that can be minimized.

Solution

To avoid code duplication and enhance the usability of trackBy, we employ a helpful technique known as PerformanceUtils.

export class PerformanceUtils {
  static trackById(_index: number, item: any): string {
    return item.id;
  }

  static trackByIndex(index: number): number {
    return index;
  }
}

Subsequently, the PerformanceUtils can be declared as a class property and utilized directly within the template.

@Component({
  selector: 'app-cats',
  template: `
    <ul> 
      <li *ngFor="let item of items; trackBy: PerformanceUtils.trackById">
    </ul>
  `,
  styleUrls: ['./cats.component.scss'],
})
export class CatsComponent {
  @Input() items: {id: number; name: string}[];

  PerformanceUtils: typeof PerformanceUtils = PerformanceUtils;
}

@Component({
  selector: 'app-dogs',
  template: `
    <ul> 
      <li *ngFor="let item of items; trackBy: PerformanceUtils.trackByIndex">
    </ul>
  `,
  styleUrls: ['./dogs.component.scss'],
})
export class DogsComponent {
  @Input() items: string[];

  PerformanceUtils: typeof PerformanceUtils = PerformanceUtils;
}

As we can see we have a lot of boilerplate code, which can be reduced, and now is very easy to integrate trackBy in every *ngFor of your application has become effortless by simply declaring one additional property.

Connect with us on social media:
🙉 Visit us on our website: AngularMagic.com
🙈 Follow us on LinkedIn: LinkedIn
🙊 Follow us on Telegram: Join link

🤌 Stay updated with our latest news, articles, and updates by following us on these platforms. We appreciate your support!