Menu
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:
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.
342
[()] = [] + () where [] binds attribute, and () binds an event. The [(ngModel)] syntax is the recommended way of two-way data binding. The ngModel directive with [] syntax is used for one-way data binding. [ngModel] binds a value to a property to UI control.
Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components.
Two-way data binding can be achieved using a ngModel directive in Angular. The below syntax shows the data binding using (ngModel), which is basically the combination of both the square brackets of property binding and parentheses of the event binding.
One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data.
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.
55
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
