0

See this: https://stackblitz.com/edit/angular-ivy-ytwi1v
Here, once we open menu and hover on the menu options, the function call used by table cells is being triggered. Console logs on hovering few times
So, my question is:

  1. Why does this happen?
  2. How to control/avoid it?

Edit: I have added a visual change to highlight the issue.

Surya
  • 48
  • 7

1 Answers1

1

Your issue is Angular change detection. All templates action listeners like click, hover and etc - in the end, call ApplicationRef.tick(). Which runs the change detection cycle in the component tree.

All functions and getters in each component template will be called again when change detection happens there. That’s why your border colors change when you hover on the menu item.

The solution is to make this border calculation after elements receiving, otherwise, you do it every change detection cycle, it can decrease your app performance.

Example: https://stackblitz.com/edit/angular-ivy-u4mjby?file=src%2Fapp%2Fapp.component.ts

Dmitry Sobolevsky
  • 1,171
  • 6
  • 12