Angular Just Added Arrow Functions to Templates — And I’m Not Sure It’s a Good Idea

Angular 21.2 introduced support for arrow functions directly in templates. At first glance, this looks like a long-awaited improvement — less boilerplate, more flexibility. But the more I experimented with it, the more questions I had. What Changed? Angular templates can now use pure JavaScript arrow functions inline. This means you no longer need to define simple logic inside your component class — you can write it directly in the template. Let’s look at how this works in practice. Example Setup We’ll use a simple component with a list of heroes: import { Component , signal , WritableSignal } from ' @angular/core ' ; import { CommonModule } from ' @angular/common ' ; import { HeroesList } from ' ../heroes-list/heroes-list ' ; export interface Hero { id : number ; name : string ; lastName : string ; nickname : string ; email : string ; } @ Component ({ selector : ' app-heroes ' , imports : [ HeroesList , CommonModule ], templateUrl : ' ./heroes.component.html ' , styleUrl : ' ./heroes.