Function on ngFor loop is called too many times

Question

I have a checkbox component in a loop that makes a call to the controller to see if it's checked on initial load. The list that it's looping through is only three items long but the function is being called 24 times.

HTML :

       <div class="MhSearchForm__Checkboxes">
        <div *ngFor="let propertyStatus of propertyStatuses" class="ml-3">
          <app-mh-check-box [option]="propertyStatus" [checked]="isChecked(propertyStatus)" (action)="statusSelected($event)"></app-mh-check-box>
        </div>
      </div>

JS:

  isChecked(status) {
   console.log(status);
  }

Answer 1

This is Normal, It is due to the fact that Angular will call that function every time the model changes, because it has no idea if the model change has an impact That's expected and normal.

Answer 2

You should read about angular life-cycle hooks, It is amazing how angular keeps track of everything like, view initializing, after view init, before view, doCheck etc.

Angular Life Cycle Hooks

Hope that Helps !