Form response is slow when typing in input

I have a form and no matter what I tried I couldn’t find out why it’s laggy!

the component that consists of this form has many children in a structure that the component itself as a skeleton and the children as bone

each child component has ngOnChanges and couple or more parameters passed to it.

I have only one form that responds slow and the rest are fine among the child components, not sure what causes this problem

this is a timeline of the laggy form:


and this of the other forms:


the laggy form has no major functions or what so ever, it contains only 12 input fields with only 3 as required and only a length constraint.

the only difference between the laggy form and the others is the following:

In parent html:

<child-that-has-laggyForm></child-that-has-laggyForm> —> one parameter, one update event passed, the child component ngOnChanges displays data and has a function that creates a modal for the form (the laggy form)

Heavier than the previous, more than 2 parameters passed, no update events. has many functions: 1 opens modal form , one redirects to another component then from there to the form.

this is the best I can explain, need your help guys, thanx

I suspect ngOnChanges, especially if it does anything modifying state. Try eliminating it and see if it makes a difference.

1 Like

yup, it seems your right… I commented out the whole ngOnChanges and opened the form , it responses fine now… I also noticed that the structure I am following I am only able to display data using ngOnChanges which executes more than its required… is there a better way to handle this performance wise, or is this fine ? not to forget to mention , all the other children components has ngOnChanges as well

Yes. Generally speaking, either two-way binding with ngModel or binding to a FormControl using Angular’s reactive forms.