Angular Performance

*ngFor with Ionic Components

When using *ngFor with Ionic components, we recommend using Angular's trackBy option. This allows Angular to manage change propagation in a much more efficient way and only update the content inside of the component rather than re-create the component altogether.

By using trackBy you can provide a stable identity for each loop element so Angular can track insertions and deletions within the iterator. Below is an example of how to use trackBy:

home.page.html

<ion-item *ngFor="let item of items; trackBy:trackItems">
  <ion-label>{{ item.value }}</ion-label>
</ion-item>

home.component.ts

items = [
  { id: 0, value: 'Item 0' },
  { id: 1, value: 'Item 1' },
  ...
]

trackItems(index: number, itemObject: any)