Passing the return value of a function into a custom Angular component

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
}

BadPiggie · Accepted Answer · 2020-01-26 13:02:21Z

3

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

answered Jan 26, 2020 at 13:02

BadPiggie

6,4391 gold badge17 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BadPiggie Over a year ago

Good luck dude!

SoCo Over a year ago

That thing is a common mistake when starting with Angular. +1 for the easy to digest and straight to the point answer.

Collectives™ on Stack Overflow

Passing the return value of a function into a custom Angular component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related