In angular template I am trying to load rows of a table using ng for. I also have some conditional content in certain columns that loads markup based on the values of other column. (code shown at the end)
The problem I am facing is that even if I am moving mouse on this page , on the browser console I see message "isEligibleForVacDays executed" multiple times. When I say multiple times , It is literally more than 1000 times in 4 seconds just by moving the mouse quickly on the page.
How do I avoid this & making sure it gets executed only once? I am using similar ngif='method-call()' syntax on 5 places. I read that we could use pure pipes & I also tested & it was not executing multiple times.
I would like to know what is the correct way to resolve this issue. Thanks for taking time to read my question.
See below.
Template markup for one row
<mat-cell class="actions center " *matCellDef="let employeeRow">
<span *ngIf="isEligibleForVacDays(employeeRow)"
class="actionIcon"
(click)="onReloadClick(employeeRow)"
matTooltip="Eligible for Vacation Days">
<i class="fa fa-refresh fa-2x" aria-hidden="true"></i>
</span>
</mat-cell>
Function in component typescript file
isEligibleForVacDays()
{
console.log('isEligibleForVacDays executed')
let isEligibleForVacDays = false;
some complex logic based on instance variables set on the component
// finally returning true or false
return isEligibleForReload;
}