How to improve performance of ngFor loop?

Question

When ngFor should render 7600 items which are strings, then performance are very slow, browser freeze on couple of seconds.

Is somehow possible to improve performance of ngFor?

ngFor code:

  <ul *ngIf="isOpen"
    class="nano-drop-down-list"
    dropdownMenu>
    <li class="nano-f-r nano-f-30">
        <input [(ngModel)]="searchString"
               class="nano-f nano-p-0_10 nano-bc-ws hover-effect"
               placeholder="Search..." type="text"/>
    </li>

    <!-- ngFor which should be improved -->
    <li *ngFor="let option of arrayOfOptions | nanoSearchByKey:searchString:displayProperty;"
        [ngClass]="{'active':isOptionSelected(option[valueProperty])}"
        class="nano-f-r nano-f-30 nano-bc-ws hover-effect">
        <button (click)="handleClickOnOption(option[valueProperty]);"
                type="button"
                class="nano-f-c nano-f nano-p-0_10 nano-overflow-h">
            <div class="nano-f-r nano-f">
                <span class="nano-m-aaa0 nano-overflow-e">
                    {{ option[displayProperty] }}
                </span>
                <div *ngIf="isMultiple"
                     class="nano-f-r nano-f-30">
                    <i *ngIf="isOptionSelected(option[valueProperty])"
                       class="fa fa-check nano-m-a"
                       aria-hidden="true"></i>
                </div>
            </div>
        </button>
    </li>
</ul>

Use server filtering to reduce the number of items to be populated in the list — Pandiyan Cool, Jul 13 '18 at 12:05

Philipp Meissner · Accepted Answer · 2018-07-13T12:35:37.430

10

NgForOf in Angular 6 comes with the option to override the track by function (source). It allows you to choose what property/condition angular should check changes against.

For that, simply add a method to your component like so:

trackByFn(index, item) {
  return item.someUniqueIdentifier;
  // or if you have no unique identifier:
  // return index;
}

Whereas in your components HTML you change the loop to

<li *ngFor="let option of arrayOfOptions | nanoSearchByKey:searchString:displayProperty; trackBy: trackByFn"
        [ngClass]="{'active':isOptionSelected(option[valueProperty])}"
        class="nano-f-r nano-f-30 nano-bc-ws hover-effect">

Angular will automatically pass the current index, as well as the current item to the function.

Here's a good post with a more concrete example and further information (Thanks @Pedro Arantes).

edited Jul 13 '18 at 12:35

answered Jul 13 '18 at 12:07

Philipp Meissner

5,273
5
34
59

1

Great answer. I recommend this article (https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5) with an example for better understanding. – Pedro Arantes Jul 13 '18 at 12:33
Thanks. I added it to my answer and mentioned you. – Philipp Meissner Jul 13 '18 at 12:36
@PhilippMeissner Thank you. – James Delaney Jul 13 '18 at 12:57

score 1 · Answer 2 · answered Jul 05 '19 at 10:14

The solution with the trackBy and the function is correct.

My solution is the follow:

<li *ngFor="let option of arrayOfOptions | nanoSearchByKey:searchString:displayProperty;let i = index;trackBy: i" [ngClass]="{'active':isOptionSelected(option[valueProperty])}"
        class="nano-f-r nano-f-30 nano-bc-ws hover-effect">

using

let i = index; trackBy: i

in order to avoid to have a function

How to improve performance of ngFor loop?

2 Answers2

Linked