Angular official skills are calling functions in the templates

Describe the problem that you experienced

I was forced to do something like this on eslint level in every repo, but is it highly inefficient (costs so much tokens) to catch it in the end ...

 {
   'no-restricted-syntax': [
        'error',
        {
          selector: 'Call[args.length > 0]:not(BoundEvent Call)',
          message:
            'Avoid calling functions with arguments in templates. Use signals, properties, or pure pipes instead.',
        },
   ],
}

Enter the URL of the topic with the problem

No response

Describe what you were looking for in the documentation

No response

Describe the actions that led you to experience the problem

No response

Describe what you want to experience that would fix the problem

No response

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here

If the problem is browser-specific, please specify the device, OS, browser, and version

Provide any additional information here in as much as detail as you can

Which skill is calling function in the templates ?

angular-developer ... it is general problem that eslint is not respected ...

I can confirm this. A few days ago, while writing a skeleton component to iterate through rows using GPT 5.6 Luna (Medium), I used to put a function in a @for or @if loop. Should we possibly specify this in some best practices guidelines?

As additional information: the project was completely new in Angular 21, using signals; there was no use of functions in the template to justify the agent following a project pattern.

angular-developer ... it is general problem that eslint is not respected ...

It wouldn't be a problem with the skill itself; I don't think the skill indicates or recommends using functions in the template, but it should specify that it's not recommended in that case.

same for me, happen multiple times

There isn't a clear cut here.

In the world of OnPush by default, and zoneless, calling a function might be fine depending on what the functions actually do.

There isn't an official recommendation to not call functions in templates. And actually signals invocations are functions calls.

Do you have examples of functions that agents are writing and calling in templates that they shouldn't?

Here is the example

Celtian/qdb-converter@17f1ce4

it happened in multiple repos ...

This is a brief summary of the component I mentioned earlier. The only additional information is that it uses Angular v21, and Zoneless.

@Component({
  selector: 'app-placeholder',
  template: `
    @for (count of groups(); track $index) {
      <div class="group">
        @for (_ of items(count); track $index) {
          <div class="item">
            <div class="lines"></div>
            <div class="action"></div>
          </div>
        }
      </div>
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Placeholder {
  count = input(3);

  groups = computed(() => [this.count(), 1, 1]);

  items(count: number) {
    return Array(count);
  }
}

In the world of OnPush by default, and zoneless, calling a function might be fine depending on what the functions actually do.

I agree with this. If we use zoneless and OnPush, it shouldn’t be problematic. The issue usually comes when we have some rule configured, and IIRC, it wasn’t recommended at the time. IMO, it would be good to specify this.

Perhaps, the reason for such errors by LLMs is that a signal is the same as a function call, eg:

comp.html

<p>{{ foo() }}</p>

foo is a signal or a function? The only way to know is read the typescript. This might lead LLMs to believe that using functions in HTML is legitimate.

This is also applicable to codebases before signals. Claude for example explicitly needs to be told to create pipes.

One could argue pipes are awkward, and the trackFn should be able to do the job. But it's not as natural to use as key and :key in react/vue

docs: add guidance against calling methods in templates

Navigation Menu

Repository navigation

Angular official skills are calling functions in the templates #70132

Describe the problem that you experienced

Enter the URL of the topic with the problem

Describe what you were looking for in the documentation

Describe the actions that led you to experience the problem

Describe what you want to experience that would fix the problem

Add a screenshot if that helps illustrate the problem

If this problem caused an exception or error, please paste it here

If the problem is browser-specific, please specify the device, OS, browser, and version

Provide any additional information here in as much as detail as you can

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Angular official skills are calling functions in the templates #70132

Description

Describe the problem that you experienced

Enter the URL of the topic with the problem

Describe what you were looking for in the documentation

Describe the actions that led you to experience the problem

Describe what you want to experience that would fix the problem

Add a screenshot if that helps illustrate the problem

If this problem caused an exception or error, please paste it here

If the problem is browser-specific, please specify the device, OS, browser, and version

Provide any additional information here in as much as detail as you can

Activity

JeanMeche commented on Aug 9, 2026

Celtian commented on Aug 9, 2026

SkyZeroZx commented on Aug 9, 2026

cesco69 commented on Aug 10, 2026

JeanMeche commented on Aug 10, 2026

alxhub commented on Aug 10, 2026

Celtian commented on Aug 10, 2026

SkyZeroZx commented on Aug 10, 2026

cesco69 commented on Aug 13, 2026

martin-juul commented on Aug 13, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions