When the cursor moves within the div with a mousemove
event, it will constantly trigger change detection. In each change detection cycle, Angular will re-execute all functions in the template to evaluate the actual change in DOM. Adding a setter method doesn’t actually fix the issue automatically. The change that really matters is about the removal of the function call. When we change the getter method into an array in the setter approach:
get oddValues(): number[] { ... }
to
oddValues = [];
We effectively remove the function call, which hence, solves the problem. In fact, using setter method is just an example to compensate the loss of functionalities when we replace a getter method with a simple attribute.