Angular 17 New Control Flow | Allow more than one node at root @if, @else, @for, etc

[WarGreyGon]

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

Allow multiple child nodes inside new control flow like bellow

<app-box>
  @if (selected === 'fish'){
    <span header> Fish </span>
    <span main> 🐟 🐡 🐙 🐠  </span>
  } @else {
    <span header> Mammals </span>
    <span main> 🦍 🐅 🦬 🐫  </span>
  }
</app-box>

without throwing bellow error

Node matches the "[header]" slot of the "BoxComponent" component, but will not be projected into the specific slot because the surrounding @if has more than one node at its root. To project the node in the right slot, you can:

1. Wrap the content of the @if block in an that matches the "[header]" selector.
2. Split the content of the @if block across multiple @if blocks such that each one only has a single projectable node at its root.
3. Remove all content from the @if block, except for the node being projected.

This check can be disabled using the extendedDiagnostics.checks.controlFlowPreventingContentProjection = "suppress" compiler option.

Proposed solution

Make bellow snippet work

<app-box>
  @if (selected === 'fish'){
    <span header> Fish </span>
    <span main> 🐟 🐡 🐙 🐠  </span>
  } @else {
    <span header> Mammals </span>
    <span main> 🦍 🐅 🦬 🐫  </span>
  }
</app-box>

Alternatives considered

Since I am using projections I have to use multiple @if

<app-box>
@if (selected === 'fish'){
  <span header> Fish </span>
}    
@if (selected === 'mammals'){
  <span header> Mammals </span>
}
@if (selected === 'fish'){
  <span main> 🐟 🐡 🐙 🐠  </span>
}
@if (selected === 'mammals'){
  <span main> 🦍 🐅 🦬 🐫  </span>
}
</app-box>

but this approach is a pain in the *ss, more verbose and less readable

[JeanMeche]

Hi, this has been discussed in #53477. This is known limitation of content projection.

[JoostK]

This has been discussed when designing the content projection behavior with the new control flow, and there isn't a feasible way to support these cases. It would require splitting the template into multiple embedded views, but this introduces problems where template references cannot be accessed across those distinct embedded views.

It becomes more problematic with @for, where insertions and deletions of rows would have to be performed to multiple DOM parent nodes.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.