Angular2 performance with a lot of two-way input elements

Question

I have a component that displays a user interface similar to a spreadsheet. There are many elements with two-way binding [(ngModel)] to a mutable object.

As soon as the number of inputs increases to 100 or so, the user interface becomes sluggish. The profiler shows a lot of time in decimal format (decimal pipe).

I can think of several possible solutions:

• Using immutable objects somehow?
• Configuring two-way data binding?

I don't use ChangeDetectionStrategy OnPush, but I'm curious how this will help and how to implement it using [(ngModel)] on the html inputs.

Answer 1

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

Instead of showing a table with many input fields at the same time - I would rather make a cell an input field only when focusing and otherwise show only the value of the cell. Use * ngIf when checking the input of the current edited cell.

Thus, you should be able to maintain the functionality you want, but by making only a focused spreadsheet cell, this should improve page performance.

Answer 2

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