Performance issue on any event like button click, mouse over, typing in angular-7

26 views
Skip to first unread message

Ajit

unread,
Jun 12, 2020, 8:05:29 AM6/12/20
to Angular and AngularJS discussion
Hi All,

I am facing performance issue when click on any button/mouse hover/typing when page have more data.
Based on my analysis the issue is due to the 'change detection' by angular. 

I found as there are some place calling the function as I have to render different records and need dynamic values based on multiple parameters. So I am calling function from the template (.e.g ngClass)to evaluate the values based on parameter.

Due to angular change detection all the functions are getting called automatically and causing performance issue.

Now I use ChangeDetectionStrategy.OnPush which is not calling the autochangedetection always however change detection is getting called when button click/click anywhere /mouse hover/typing and again causing performance issue when the page having more data.

I am unable to use the expression as I have to do so many condition check to  evaluate the value, hence calling the function.
Again if I use a variable in the component and use ngOnChange event to populate then it will not have the dynamic values for each record and will not fulfill my requirement.

Can any one please guide on how to resolve this performance issue. 






Thanks in Advance,
Ajit

Sander Elias

unread,
Jun 15, 2020, 1:05:46 AM6/15/20
to Angular and AngularJS discussion
Hi Ajit,

It sound like you are doing too much logic inside the template. Move most, if not all of the logic to the controller and it will get better. 
Also, are you also sure you need to all your choices on a mouseClick? perhaps refactor your app so, that it only "recalculates" when data-changes occur.

Regards
Sander

Ajit

unread,
Jun 15, 2020, 1:44:43 AM6/15/20
to Angular and AngularJS discussion
Thank you Sander for your response.

One example of my schenario is:

Template calling function(e.g. [ngClass] = "getClass(parameter1, parameter2)") which resides in the component class. I am unable to make this without callinga function as I have multiple rows and each row css class wouold be different based on the row data. This is one example and like this there ae many.

I am trying to avoid refactoring as I have to do for the whole application and it would be lot of effort required and again the whole app need to be retested. 
Hence I am trying to see is there any alternate approach available to improve the performance. 

Again the application is fully developed and I am the new one to the application. So to refactor I need to understand the whole application which will take time.



Thanks,
Ajit Dash

Ajit

unread,
Jun 18, 2020, 12:29:19 PM6/18/20
to Angular and AngularJS discussion
Any help or suggestion on this?

Sander Elias

unread,
Jun 20, 2020, 1:05:13 AM6/20/20
to Angular and AngularJS discussion
Ajit,

I can repeat my previous reply. Using functions in templates is an antipattern in Angular, and should be a last-stop solution. Each of those functions is called numerous times. This will cause a performance hit. What you can do is some memorization in the functions itself.
A better solution would be adding the needed data to the rows itself.
In cases like this I usually so something in my controller like this:
rows.forEach(row=>row[className]=calculate(...))

and use the className in the template. This will only run once when the data comes in. after that, it is a simple lookup in the template.

regards,
Sander

ajit dash

unread,
Jun 20, 2020, 2:24:23 PM6/20/20
to ang...@googlegroups.com
Thank you so much Sander,
Agreed, I will try your approach.


Thanks,
Ajit

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/df539074-0cc8-4510-aea9-9bf8183394bfo%40googlegroups.com.

maninder singh Kumar

unread,
Jun 21, 2020, 5:35:11 AM6/21/20
to ang...@googlegroups.com
Performance is a matter of leaner code


Reply all
Reply to author
Forward
0 new messages