CODEWITHSUNDEEP
performanceangular
geejay
geejay

Reputation: 5618

Angular2 performance with lots of input elements with two way binding

I have a component which displays a UI similar to a spreadsheet. There are lots of elements with two way binding [(ngModel)] to a mutable Object.

As soon as the number of inputs grows past 100 or so inputs the UI becomes sluggish. The profiler shows a lot of time in Decimal format (decimal pipe).

I can think of a couple of possible solutions:

  1. Using immutable objects somehow?
  2. Customising the 2 way databinding?

I am not using ChangeDetectionStrategy OnPush, but I am curious as to how this will help and how to actually implement it with [(ngModel)] on html inputs.

Upvotes: 8

Views: 1785

Answers (2)

Peter Salomonsen
Peter Salomonsen

Reputation: 5683

Many input fields on a page is stressful both for the CPU and the user.

Instead of showing a spreadsheet with many input fields simultaneously - I would rather make the cell an input field only when focused, and otherwise only show the value of the cell. Use *ngIf on the input checking for the current cell being edited.

This way you should be able to keep the functionality you want, but by making only the focused spreadsheet cell an input - that should improve the performance of the page.

Upvotes: 5

kemsky
kemsky

Reputation: 15251

Since NgModel is directive it does not support change detection strategies, it means that you should avoid NgModel. The only way is to create custom component that uses OnPush strategy and wraps input field.

Upvotes: 1

Related Questions