How to optimize rendering in Angular?

Question

I render array of object in template using ngFor:

<tr *ngFor="let p of rows; let i = index">
        <td class="tableDefault__td tableDefault__center td__number">
          {{ i + 1 }}
        </td>
        <td class="tableDefault__td tableDefault__center td__date">
          <div class="history_item" *ngFor="let h of p.history">
            <span class="span_link" (click)="goto(h)"
              >{{ h.classNumber }}{{ h.classSuffix }},
              {{ formatDate(h.whenDate) }}</span
            >
          </div>
        </td>
        <td class="tableDefault__td tableDefault__center td__theme">
          <input
            [disabled]="!isOwner(teacherId)"
            type="text"
            name="subject"
            placeholder="{{ 'create_plan_e_name' | translate }}"
            [(ngModel)]="p.topic"
            autofocus
          />
        </td>
</tr>

Rendering works so slowly when array rows container more then 400 objects. How to optimize rendering or cache it? Perhaps problem is in nested loop *ngFor="let h of p.history"?

ahbon · Accepted Answer · 2019-04-19 11:09:13Z

3

You can use a trackBy function in you ngFor directive to improve performance by providing an unique id. It allows Angular to better handle the change detection concerning the array you bound.

Something like:

HTML

<tr *ngFor="let p of rows; trackBy: trackByFunction; let i = index">
    ....
</tr>

TS

public trackByFunction(index, item) {
    if (item) {
        return item.id;
    }
    return null;
}

Here is a good example.

And the official documentation.

edited Apr 19, 2019 at 11:09

answered Apr 19, 2019 at 11:06

ahbon

5115 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

POV Over a year ago

Track by accepts custom function, what function should return? Why do you return item.id instead item?

ahbon Over a year ago

It must return an unique identifier so that Angular can only reload specific elements in you array and not the whole array when a change is detected.

Collectives™ on Stack Overflow

How to optimize rendering in Angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related