将函数的返回值传递给自定义 Angular 组件

Question

Is there anything wrong with passing a value into a custom component like this? I noticed that when I console.log inside someFunction it is called many times when the component is loaded. Can someone explain?

HTML

<custom-component [someInput]=“someFunction(‘someParameter’)></custom-component>

TS

someFunction(someParameter) {
    return someValue
}

Answer 1

YES, You are right,

In angular you should not call functions in template .

Reason

The main goal of angular is, Rendering the DOM when detecting any changes. So If angular detect any changes/updates in your application, It will re-render the template. So when It re-render each time, The function you used in template(props) will be called.

Always follow the best practices

why-you-should-never-use-function-calls-in-angular-template-expressions