Function is getting called many times by using template interpolation?

Question

Sorry for basic question, I am trying to understand the angular2 flow using basic example.

import { Component } from '@angular/core';

@Component({
    selector:'my-app',
    template:'Test {{ getVal() }}'
})

export class AppComponent{ 
    getVal():void{
        console.log("demo text")
    }
}

After running this example, "demo text" is visible in console 4times, why is it so ? Thanks.

Answer 1

Binding to functions or methods in the template is discouraged because these functions are called every time change detection is run.

You should at least cache results inside the function to avoid repeatedly recalculating potential expensive calculations.

A better approach is to recalculate the result when properties change the result depends on, and assign the result to a property and bind to this property from the view instead.