Repository navigation
docs: document arrow function template expressions in developer skill - #71395
diegoinost02 wants to merge 1 commit into
Conversation
Template expressions support arrow functions with an expression body (e.g. items().filter((i) => i.active)), which was not documented anywhere in the angular-developer skill. Block-body arrow functions remain unsupported, and a pipe cannot be used inside an arrow function's body.
| callbacks: | ||
|
|
||
| ```html | ||
| {{ items().filter((i) => i.active).length }} |
There was a problem hiding this comment.
This def' not a great example for inline arrow functions (it would run on every CD cycle).
The best use-case is a signal update in an event listener.
| {{ items().filter((i) => i.active).length }} | ||
| ``` | ||
|
|
||
| Arrow functions with a block body (`() => { ... }`) are not supported. A pipe cannot be used |
There was a problem hiding this comment.
I think the most common mistake here (especially coming from React) is (click)="() => save()", which never calls save. The compiler only reports it as a warning (NG8111), so the build still passes. Maybe we can keep this paragraph focused on what changes the code the agent writes:
| Arrow functions with a block body (`() => { ... }`) are not supported. A pipe cannot be used | |
| Arrow functions must have an expression body, such as `(c) => c + 1`. In event bindings, call the | |
| method directly, `(click)="save()"`, because an arrow function like `(click)="() => save()"` is | |
| never invoked. |
I'm not sure the pipe part adds much for an agent, so I left it out, but let's see what others think.
| callbacks: | ||
|
|
||
| ```html | ||
| {{ items().filter((i) => i.active).length }} |
There was a problem hiding this comment.
I'm not sure this is a good example, it's derived state in the template, so filter runs on every check even if items didn't change. The skill and our best practices recommend computed for this, so I think the agent would learn the opposite.
I think we can replace it with the following :
| {{ items().filter((i) => i.active).length }} | |
| ```html | |
| <button (click)="count.update((c) => c + 1)">Increment</button> | |
| ``` | |
| For derived values such as a filtered list, use a `computed` signal in the component instead. |
Template expressions support arrow functions with an expression body (e.g. items().filter((i) => i.active)), which was not documented anywhere in the angular-developer skill. Block-body arrow functions remain unsupported, and a pipe cannot be used inside an arrow function's body.
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
components.mddoesn't mention that template expressions support arrow functions.Issue Number: N/A
What is the new behavior?
Adds an "Arrow Functions in Template Expressions" subsection.
Does this PR introduce a breaking change?