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 experimen...
Source: DEV Community
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.component.scss', standalone: true })
