Why template is getting compiled four times in angular 4?

Question

I am calling a function from inside an angular template (interpolation), strangely the function is getting invoked four times !!

I do know how change detection works in angular, as I understood change-detection process kickstarts if binding value gets updated.

In this scenario, I am not binding / changing any thing as such..

var i = 0;

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h1>{{ parentCounter() }}</h1>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    
  }
  
  parentCounter(){
    alert(`${++i} called`);
    return 5;
  }
}

Ref: https://plnkr.co/edit/pta0s0nzcsLdTsjCtb3D?p=preview

Note: Template got compiled four times before the async event

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2017-11-17T11:55:22

If you bind to functions in the view like

<h1>{{ parentCounter() }}</h1>

then Angular calls this function every time change detection is run.

If this function returns a new object every time it is called, you'll even get an exception in development mode.

Expression has changed since it was last checked

It is better to assign the result of the call to a field and bind to that field instead.

var i = 0;

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h1>{{ counter }}</h1>
    </div>
  `,
})
export class App {
  name:string;
  counter:number;
  constructor() {
    this.counter = this.parentCounter();
  }

  parentCounter(){
    alert(`${++i} called`);
    return 5;
  }
}

Why template is getting compiled four times in angular 4?

2 Answers