Allow for iterative content projection with content children

[trickeyone]

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

core

Description

I have a situation where I am passing content to a wrapper component with multiple children of the same component type. I would like to be able to do something like this:

Main component template

<my-list>
    <my-list-item>List Item 1</my-list-item>
    <my-list-item>List Item 2</my-list-item>
    <my-list-item>List Item 3 <input type="text" [(ngModel)]="myBoundVariable" /></my-list-item>
</my-list>

my-list.component.ts

@Component({
    selector: 'my-list',
    template: `
        @for (item of listItems();; track item) {
            <!-- item's content projected here with component's wrapping tag -->
            @if (!$last) {
                <hr />
            }
        }
`
})
export class MyListComponent {
    listItems = contentChildren(MyListItemComponent);
}

my-list-item.component.ts

@Component({
    selector: 'my-list-item',
    template: `<ng-content></ng-content>`,
    styles: [':host { display: block; border: solid 1px red; }'],
})
export class MyListItemComponent {}

The desired end result would be

<my-list>
    <my-list-item>List Item 1</my-list-item>
    <hr />
    <my-list-item>List Item 2</my-list-item>
    <hr />
    <my-list-item>List Item 3 <input type="text" /></my-list-item>
</my-list>

Proposed solution

Be able to pass the result of a Signal or QueryList to ng-content or another new addition to place specific instances of content children iteratively.

Alternatives considered

The current alternative is to pass whether the child is the last in the list via an input. This can become repetitive and adds additional effort for each component this kind of processing might need. Being able to iteratively project instead of just everything via ng-content or ng-content with selector would be very beneficial.