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;
}

```