Feature Request💥 Add Destructuring Support in @for Loops and async if's #57374
Description
Relevant Package
This feature request is for @angular/core.
No response
Description
With Angular's recent introduction of the new control flow syntax, which is much more aligned with TypeScript, I believe it’s the perfect time to bring in a feature that many developers would find incredibly useful—destructuring in templates.
Destructuring is something I often use in TypeScript to simplify code and make it more readable. It allows us to unpack values from arrays or properties from objects into distinct variables, which can really tidy up the code. Right now, Angular templates don’t natively support this within @for() loops or async if's, which feels like a missed opportunity.
Imagine being able to write something like this:
<div @for({id, name} of items)>
{{id}}: {{name}}
</div>
<div @if(data$ | async; as {a, b})">
{{a}} - {{b}}
</div>
This would allow developers to directly destructure objects or arrays right in the template, making the templates cleaner and more intuitive.
Proposed solution
Add support for destructuring within @for() loops and async if's in Angular templates. The syntax could be very similar to how destructuring works in TypeScript, allowing for a seamless experience between the two.
For example:
<div @for({property1, property2} of dataList)>
{{property1}} - {{property2}}
</div>
<div @if(observable$ | async; as {prop1, prop2})">
{{prop1}} and {{prop2}}
</div>
This approach would make the template code more concise and closer to the TypeScript code, improving both readability and maintainability.
Alternatives considered
Custom Pipes or Directives: Another alternative is to create custom pipes or directives that handle destructuring. But this can lead to over-engineering and makes the codebase harder to understand, especially for teams that may not be familiar with these custom solutions.