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

core

Description

Consider the following scenario:

A component wants to render user-specified content. This can easily be achieved with contentChildren queries for a custom directive:

// ts
protected readonly markers = contentChildren(MyMarkerDirective);

// html
@for (marker of markers(); track marker) {
  <ng-container *ngTemplateOutlet="marker.templateRef"/>
}

However, we want to wrap this component inside another component but we want to keep the possibility to provide user-specified content.

Since nested content projection still doesn't work as one could expect (e.g. #47732), we thought that instead of a contentChildren query, we would invert the whole dependency tree: register a container in the component that previously used the children query and the directive would directly register itself into this container.

However, this still does not work because the instance provided by the component is not available in a directive created through content projection. See the following stackblitz for a complete example: https://stackblitz.com/edit/stackblitz-starters-yle9g4?file=src%2Fmain.ts

In summary, we have the following component tree:

app
 |-- wrapper component (view child of app)
       |-- marker handler (view child of wrapper component)
             |-- template with marker directive (view child of app, content child of wrapper component, SHOULD BE view/content child of the marker handler)

We want to access the injectable instance provided by the marker handler in the marker directive.

Proposed solution

The injector tree should consider the view/content relation even for projected content that comes from outside. That way we could work around the nested projection issue by inverting the dependency graph. And it would work n-deep as well.

// caller side
<my-wrapper>
  <p myDirective>Hello</p>
</my-wrapper>

// wrapper
<my-cool-component>
  <my-another-component>
    <my-component-interested-in-directive> <!-- container provided here -->
      <ng-content/> <!-- myDirective projected here should be able to see the container -->
    </my-component-interested-in-directive>
  </my-another-component>
</my-cool-component>

Alternatives considered

In the linked stackblitz, we created an ugly workaround where the component that previously used a content query re-provides the container. In addition to being an ugly workaround, it might cause unexpected results (e.g. finding a container that should not be found, etc.).