The difference between calling a function inside a template and using a component's property

[maxkoretskyi]

Many believe that calling functions inside Angular's template is bad by itself. It's not. Here's the comparison between using a property and a function call. The difference is negligible - just a couple of bytecode instruction.

What's important is how many times your access that property or call the function.

[gudzdanil]

If I only knew what this bytecode means

[tarangkhandelwal]

Agree, the generated code doesn't seem to have much of a difference. It's the runtime performance that can be a major difference.

My understanding is,
If using a property binding, angular can track if it got changed or not, but with function, it has to be called multiple times as Angular cannot track if something is changed.
A lot of times I have to use pure pipes instead of functions for performance improvement if it helps the usecase.

[r0ss0neri]

So, main point here that angular during change detection in any case will compare prev and current values. (It's not a question how much times cd happens)

And not much difference in below example:

const getFoo = () => 'foo';

prevFoo === getFoo()
// vs
prevFoo === 'foo' // equal -> nothing to do

But in more real life example it has more perfomance impact:

const getItems = () => ['foo', 'bar', 'baz']

prevItems === getItems() // not equal -> proceed next

And can be "fixed" like

const items = ['foo', 'bar', 'baz']
const getItems = () => items

prevItems === getItems() // equal -> nothing to do 

[waterplea]

I have this StackBlitz where you can test performance of change detection cycle with 1000 components. Imperative do not call any functions or getters, declarative do and compliant use memoization for array and objects operations:
https://stackblitz.com/edit/compliant-components-performance-ivy

It is taken from my article on declarative approach in Angular:
https://indepth.dev/posts/1365/compliant-components-declarative-approach-in-angular

[Yugofx]

for quite a long time I use a pipe (my thought, it should be in a core) to call template functions effectively

transform(arg, fn, ...args) {
 return fn(arg, ...args);
}

// html
<div>{{ fullName | func:extractName }}</div>

that simple, and it runs only for arg change, even though written in template

[waterplea]

Yes, we've been doing this as well with tuiMapper pipe:
https://taiga-ui.dev/pipes/mapper
Pretty much the same code as yours :)

[dennis-f]

this is brilliant ✨