CODEWITHSUNDEEP
angularngfor
puweac
puweac

Reputation: 35

Angular function is always called twice?

in Angular I iterate over an array with the ngFor directive. The function trend in the HTML Template is called always twice. Is there any reason why?

HTML-FILE

  <ul>
    <li *ngFor="let exercise of exercises">
      Name: {{exercise.name}}<br>      
      Sets: {{exercise.sets}}<span [innerHTML]="trend(exercise.sets,exercise.prev_sets)"></span>
    </li>
  </ul>

COMPONENT.TS

trend(value: any, prev_value: any){
    console.log("Result:" + value);
    return "";
}

CHROME CONSOLE


Result: 12  exercises.component.ts:39 
Result: 12  exercises.component.ts:39

Upvotes: 0

Views: 610

Answers (1)

Drenai
Drenai

Reputation: 12347

Method/function calls from the template are called on every change detection cycle

To avoid this either bind to a property or create a custom pipe. You can also use ChangeDetectionStrategy.onPush to reduce the change detection checks

Upvotes: 1

Related Questions