8000 Feature Request💥 Add Destructuring Support in @for Loops and async if's · Issue #57374 · angular/angular · GitHub
[go: up one dir, main page]
Skip to content

Feature Request💥 Add Destructuring Support in @for Loops and async if's #57374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
MatanShushan opened this issue Aug 13, 2024 · 5 comments
Closed

Feature Request💥 Add Destructuring Support in @for Loops and async if's #57374

MatanShushan opened this issue Aug 13, 2024 · 5 comments
Labels
area: core Issues related to the framework runtime
Milestone
needsTriage

Comments

@MatanShushan
Copy link
MatanShushan commented Aug 13, 2024 •
edited
Loading

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.
@MatanShushan MatanShushan changed the title Add Destructuring Support in @for Loops and async if's in Angular Templates Add Destructuring Support in @for Loops and async if's Aug 13, 2024
@MatanShushan MatanShushan changed the title Add Destructuring Support in @for Loops and async if's Feature Request💥 Add Destructuring Support in @for Loops and async if's Aug 13, 2024
@tomer953
Copy link
Contributor

That would be a nice addition. 👍

in that case, we probably need to add this for @let keyword as well

so:

@let name = user.name;

can be:

@let {name} = user;

@JJWesterkampAtEndeavour
Copy link
JJWesterkampAtEndeavour commented Aug 14, 2024 •
edited
Loading

This would be very nice! Additionally, I would love array destructuring assignments as well (not sure if that should be a separate feature request):

@for ([x, y] of xsAndys) {
    x is: {{ x }} and y is {{ y }}
}

This would really streamline workflows with our own custom iterables.

@pkozlowski-opensource pkozlowski-opensource added the area: core Issues related to the framework runtime label Aug 14, 2024
@ngbot ngbot bot added this to the needsTriage milestone Aug 14, 2024
@pkozlowski-opensource
Copy link
Member

If we add destructing it should be supported in all Angular expressions instead of being constrained to some usage sites

@pkozlowski-opensource
Copy link
Member

Closing as a duplicate/specific case of #43485.
Duplicate of #43485

@pkozlowski-opensource pkozlowski-opensource closed this as not planned Won't fix, can't repro, duplicate, stale Aug 14, 2024
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: core Issues related to the framework runtime
Projects
None yet
Milestone
needsTriage
Development

No branches or pull requests
5 participants
@pkozlowski-opensource @tomer953 @MatanShushan @JJWesterkampAtEndeavour and others
0