Stop Calling Functions in Angular Templates — It’s Slower Than You Think

Calling functions in Angular templates looks clean: <p>{{ getFullName() }}</p> But this pattern has a hidden cost. It’s not about correctness — it’s about how often Angular executes that function. ⚙️ What’s Really Happening Angular does not cache template function calls. Every change detection cycle re-evaluates: {{ getFullName() }} Even if: the data hasn’t changed the result is identical nothing visible updates The function still runs. 🚨 Why This Becomes a Problem Change Detection Runs More Than You Think Triggered by: user interactions async events signals updating parent component changes Each trigger = function execution again. It Explodes Inside Lists <li *ngFor="let user of users"> {{ getFullName(user) }} </li> 100 items = 100 executions Per cycle. Now add: filtering formatting derived calculations That’s where performance quietly degrades. Cost Is Invisible Until It’s Not The real issue isn’t small functions — it’s what they turn into over time. Today: r