Skip to main content

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:

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


items = [  { id: 0, value: 'Item 0' },  { id: 1, value: 'Item 1' },  ...]
trackItems(index: number, itemObject: any) {  return;}

In this example, we have an array of objects called items. Each object contains a value and an id. Using trackBy, we pass a trackItems function which returns the id of each object. This id is used to provide a stable identity for each loop element.

For more information on how Angular manages change propagation with ngFor see

From the Ionic Team#

How to Lazy Load in Ionic Angular

Improved Perceived Performance with Skeleton Screens

From the Angular Team#

Build performant and progressive Angular apps -

From the Community#

High Performance Animations in Ionic - Josh Morony

High Performance List Filtering in Ionic - Josh Morony

Increasing Performance with Efficient DOM Writes in Ionic - Josh Morony

Ionic Framework is Fast (But Your Code Might Not Be) - Josh Morony


Do you have a guide you'd like to share? Click the Edit this page button below.