Angular2 performance with lots of input elements with two way binding

Question

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:

Using immutable objects somehow?
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.

Are you using changeDetection: ChangeDetectionStrategy.OnPush? — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 12, 2016 at 21:53
That's the first measure for better performance for mor fine-grained control aboit how much work change detection should do. — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 12, 2016 at 22:06
Try to use OnPush for your ChangeDetectionStrategy as @GünterZöchbauer said and you could try to do a virtual-scroll to avoid the need of more inputs. — dlcardozo
– dlcardozo, Commented Dec 14, 2016 at 23:36

Peter Salomonsen · Accepted Answer · 2016-12-20 21:38:20Z

5

+25

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.

answered Dec 20, 2016 at 21:38

Peter Salomonsen

5,7432 gold badges26 silver badges39 bronze badges

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

Comments

kemsky · Accepted Answer · 2016-12-15 10:14:36Z

1

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.

answered Dec 15, 2016 at 10:14

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

Collectives™ on Stack Overflow

Angular2 performance with lots of input elements with two way binding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related