Search code examples
angularfunctiontemplatessignals

Are Angular Signals safe for use in the template?

It is pretty well known that you should never use a function call in an Angular template expression, but what are the rules for using signals?

Variable call -- OK
<div>{{person.name}}</div>

Function call -- NOT OK
<div>{{getTotal([1,2,3])}}</div>

Signal call -- MAYBE OK??
<div>{{getComputedTotal()}}</div>

Both are technically calling a method, but calling a signal kind of returns a static variable, but also not really? Are signals handled in such a way that calling them directly inside of a template would be considered alright to do?

I have used Signals in the template plenty without noticing any drop in performance, just not sure what best practice would be concerning them.

Solution

  • Calling methods in the template has been deemed an antipattern because that could hide some costly calls.

    It certains cases it could make sense to have functions. Here is an article about this.

    That being said, signals don't have any values until you call them in a template. There is even a PR to provide a template diagnotic for when signal aren't being executed.

    So yes, call them, they we're made for that !