Чистые функции в html шаблонах Angular

Начиная с версии 21.2 Angular внедрил поддержку чистых JS функций в html шаблонах. Теперь можно инлайнить функции без необходимости определения их в классе компонента. Фича, на мой взгляд, довольно противоречивая, поэтому давайте разбираться.

В качестве примера мы будем использовать вот такой компонент со списком героев.

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
})
export class HeroesComponent {
  heroes: WritableSignal<Hero[]> = signal<Hero[]>([
    {
      id: 1,
      name: 'Peter',
      lastName: 'Parker',
      nickname: 'Spider man',
      email: '[e-mail]'
    },
    {
      id: 2,
      name: 'Tony',
      lastName: 'Stark',
      nickname: 'Iron man',
      email: '[e-mail]'
    },
    {
      id: 3,
      name: 'Stephen',
      lastName: 'Strange',
      nickname: 'Doctor Strange',
      email: '[e-mail]',
    },
    {
      id: 4,
      name: 'Natasha',
      lastName: 'Romanoff',
      nickname: 'Black widow',
      email: '[e-mail]',
    },
    {
      id: 5,
      name: 'Bruce',
      lastName: 'Banner',
      nickname:'Hulk',
      email: '[e-mail]',
    }
  ]);

  selectedHeroId: WritableSignal<number> = signal<number>(1);
}

Для начала выведем список всех героев на экран. Здесь нет ничего особенного, обычная работа с сигналами.

<ul>
  @for (hero of heroes(); track $index) {
  <li>
    {{ `${hero.name} ${hero.lastName} - ${hero.email}` }}
  </li>
  }
</ul>

Результат

• Peter Parker - [e-mail]

• Tony Stark - [e-mail]

• Stephen Strange - [e-mail]

• Natasha Romanoff - [e-mail]

• Bruce Banner - [e-mail]

Теперь давайте посмотрим более подробную информацию по каждому из героев. При помощи кнопок Вперед/Назад мы будем перемещаться по списку героев и вытаскивать данные по каждому из них используя его id. Хранить выбранный id мы будем в сигнале selectedHeroId.

И вот здесь уже начинаются отличия.
Раньше для того, чтобы изменить значение сигнала нам пришлось бы создать в классе компонента 2 метода и вызывать их по клику на соответствующую кнопку.

<button (click)="prevHero()">Назад</button>
<button (click)="nextHero()">Вперед</button>

prevHero(): void {
  this.selectedHeroId.update((count: number) => count === 1 ? this.heroes().length : count - 1)
}

nextHero(): void {
  this.selectedHeroId.update((count: number) => count === this.heroes().length ? 1 : count + 1)
}

Сейчас мы можем делать это прямо в шаблоне.

<div class="hero-navigation">
  <button (click)="selectedHeroId.update(count => count === 1 ? heroes().length : count - 1)">Назад</button>
  <div class="hero-name">
    {{ heroes()[selectedHeroId() - 1].name + ' ' + heroes()[selectedHeroId() - 1].lastName }}
  </div>
  <button (click)="selectedHeroId.update(count => count === heroes().length ? 1 : count + 1)">Вперед</button>
</div>
<div style="hero-info">
  {{ heroes()[selectedHeroId() - 1] | json }}
</div>

Результат

Далее, покажем только тех героев, у которых совпадают первые буквы их имени и фамилии.

<div>
  {{ heroes().filter(hero => hero.name.charAt(0).toLowerCase() === hero.lastName.charAt(0).toLowerCase()).map(hero => `${hero.name} ${hero.lastName}` ).join(', ') }}
</div>

Результат

Peter Parker, Stephen Strange, Bruce Banner

Как видим, фильтрация работает.

Попробуем найти героя по домену его почты.

<div>
  {{ heroes().find(hero => hero.email.endsWith('stark.com'))?.name }}
</div>

Результат

Tony

А как насчет передачи стрелочной функции в качестве значения инпута? Для теста создадим еще один компонент, который выводит отсортированный по имени список героев.

import { Component, computed, input, InputSignal, Signal } from '@angular/core';
import { Hero } from '../heroes/heroes.component';

@Component({
  selector: 'app-heroes-list',
  template: `
    <ul>
      @for (hero of sortedHeroes(); track $index;) {
        <li>
          {{ hero.name + ' ' + hero.lastName }}
        </li>
      }
    </ul>
  `,
  standalone: true
})
export class HeroesList {
  heroes: InputSignal<Hero[]> = input.required<Hero[]>();
  sortFn: InputSignal<(a: Hero, b: Hero) => number> = input.required<(a: Hero, b: Hero) => number>();

  sortedHeroes: Signal<Hero[]> = computed(() => [...this.heroes()].sort(this.sortFn()));
}

И добавим этот компонент в наш основной шаблон.

<div>
  <app-heroes-list [heroes]="heroes()" [sortFn]="(a, b) => a.name.localeCompare(b.name)"></app-heroes-list>
</div>

Результат

• Bruce Banner

• Natasha Romanoff

• Peter Parker

• Stephen Strange

• Tony Stark

Сортировка работает.

Мы также можем работать и с литералами объектов. Для этого их надо обернуть в круглые скобки. Если этого не сделать компилятор вернет ошибку. Все дело в том, что в JavaScript фигурные скобки после стрелки обозначают тело функции, но никак не объект. 

Неправильно.

{{ heroes().map(item => { name: 'Super ' + item.nickname, email: item.email }) }}

Правильно.

<ul>
  @for (hero of heroes().map(item => ({ name: 'Super ' + item.nickname, email: item.email })); track $index) {
    <li>
      {{ `${ hero.name } - ${ hero.email }` }}
    </li>
  }
</ul>

Результат

• Super Spider man - [e-mail]

• Super Iron man - [e-mail]

• Super Doctor Strange - [e-mail]

• Super Black widow - [e-mail]

• Super Hulk - [e-mail]

Что еще НЕЛЬЗЯ сделать в шаблоне.

• Как указано на скриншоте ошибки выше, нельзя работать с многострочными функциями.

{{ heroes().map(item => {return { name: 'Super ' + item.nickname, email: item.email }}) }}

• Функция не должна возвращать другую функцию. Данный кусок кода не приведет к ошибке, но и не отработает как положено. Скомпилированный код будет выведен в виде текста.

{{ () => heroes().find(hero => hero.email.endsWith('stark.com'))?.name }}

Результат

() => { let tmp_0_0; return (tmp_0_0 = ctx.heroes().find((hero) => hero.email.endsWith("stark.com"))) == null ? null : tmp_0_0.name; }

• Также нельзя использовать пайпы в теле функции. Пайп это синтаксис шаблонов Angular и чистый JS их не поддерживает. Вот так делать нельзя.

{{ heroes().find(hero => hero.email.endsWith('StaRk.com' | lowercase ))?.name }}

Но можно применить пайп к самой функции (по сути к ее результату).

{{ heroes().find(hero => hero.email.endsWith('stark.com'))?.name | uppercase }}

Результат

TONY

Я очень люблю Angular, но данный апдейт вызывает у меня вопросы. С одной стороны, применение функций в шаблонах в некоторых случаях может быть довольно удобным. И даже привести к сокращению какого-то количества кода. С другой стороны, чем меньше логики в шаблонах, тем лучше. Плюс, уже множество раз обсуждалось, что использование функций в шаблонах негативно влияет на производительность приложения. И что вместо функций лучше использовать пайпы.

Хотелось бы услышать ваше мнение по этому поводу. Как вы думаете, стоит ли использовать функции в шаблонах? Какие вы видите аргументы за и против?