feat(compiler): Support destructured variable assignment in structural directives

🚀 feature request

Relevant Package

This feature request is for @angular/common

Description

Using the keyvalue pipe on a Map loses all naming and makes the template difficult to read

Example

@Component{...}
export class MyComponent {
    countryPoiMap = Map<Country, Poi>();
}

<div *ngFor="let countryPoi of countryPoiMap | keyvalue">
   <!-- key is a country -->
   <div>{{ countryPoi.key.name }}</div>
   <!-- value is a poi -->
   <div>{{ countryPoi.value.name }}</div>
</div>

Describe the solution you’d like

It would be great to be able to alias the result of a keyvalue pipe

Example

<div *ngFor="let countryPoi of countryPoiMap | keyvalue:country:poi">
   <div>{{ country.name }}</div>
   <div>{{ poi.name }}</div>
</div>

Other syntax

<div *ngFor="let { key as country, value as poi } of countryPoiMap | keyvalue">
   <div>{{ country.name }}</div>
   <div>{{ poi.name }}</div>
</div>

Other syntax

<div *ngFor="(let countryPoi of countryPoiMap | keyvalue) as [country, poi]">
   <div>{{ country.name }}</div>
   <div>{{ poi.name }}</div>
</div>

Describe alternatives you’ve considered

Implementing an *ngLet directive could alleviate this issue (#15280)

Example

<div *ngFor="let countryPoi of countryPoiMap | keyvalue"
    *ngLet="countryPoi.key as country"
    *ngLet="countryPoi.value as poi"
>
   <div>{{ country.name }}</div>
   <div>{{ poi.name }}</div>
</div>

[petebacondarwin]

I think the only way this might be supported would be via the second proposed option - destructured variable assignment:

<div *ngFor="let { key as country, value as poi } of countryPoiMap | keyvalue">
   <div>{{ country.name }}</div>
   <div>{{ poi.name }}</div>
</div>

I am going to retitle this issue, with this in mind, since implementing that feature would actually be more general than just the keyvalue pipe, and is more relevant to any structural directive that assigns a value to local context.

[petebacondarwin]

This is being tracked in the aggregate issue of #43485 for which we need to create a project proposal.