8000 Allow for iterative content projection with content children · Issue #61095 · angular/angular · GitHub
[go: up one dir, main page]
Skip to content

Allow for iterative content projection with content children #61095

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
trickeyone opened this issue May 1, 2025 · 2 comments
Closed

Allow for iterative content projection with content children #61095

trickeyone opened this issue May 1, 2025 · 2 comments
Labels
area: core Issues related to the framework runtime core: content projection
Milestone
needsTriage

Comments

@trickeyone
Copy link

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.
@thePunderWoman thePunderWoman added area: core Issues related to the framework runtime core: content projection labels May 2, 2025
@ngbot ngbot bot modified the milestone: needsTriage May 2, 2025
@pkozlowski-opensource
Copy link
Member

This is essentially a duplicate of #37319

@trickeyone
Copy link
Author

@pkozlowski-opensource Since #37319 has been open since 2020, has there be any progress on possibly adding support?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: core Issues related to the framework runtime core: content projection
Projects
None yet
Milestone
needsTriage
Development

No branches or pull requests
3 participants
@pkozlowski-opensource @thePunderWoman @trickeyone
0