double content projection not being picked up by contentChild

I am trying to use content projection slots to make common structural components that can also interact with the content being projected into their slots.

I am going for a result where I have some GenericFeatureContainer component that defines a layout and a slot. its using contentChild and expecting the slot to be filled with an instance of an abstract class called FeatureConsumer.

Then I have another container using the GenericFeatureContainer called SpecificFeatureContainer that fills the slot from the GenericFeatureContainer with some common structure and also defines a slot within the filling of the GenericFeatureContainer slot to pass through the content to the GenericFeatureContainer from whatever is consuming SpecificFeatureContainer. It also uses contentChild to get at the FeatureConsumer.

Finally I have my ConcreteConsumer component which uses the SpecificFeatureContainer and fills the slot with a component which declares itself as a FeatureConsumer.

My issue is that only the SpecificFeatureContainer seems to know about the FeatureConsumer. The GenericFeatureContainer does not ever get an instance of the FeatureConsumer through its contentChild even though it is displaying one through the passthrough slot from the SpecificFeatureContainer.

Here is my whole example which i used the Angular playground on angular.dev/playground

import { Component, contentChild, forwardRef } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

abstract class FeatureConsumer {
featureName = 'Business';
}

@Component({
selector: 'feature-consumer',
providers: [{ provide: FeatureConsumer, useExisting: forwardRef(() => FeatureConsumerComponent) }],
template: `
<div>
The {{ this.featureName }} feature is being rendered!
</div>
`
})
export class FeatureConsumerComponent extends FeatureConsumer {}

@Component({
selector: 'generic-feature-container',
template: `
<div>
generic feature container has a feature consumer? {{ !!featureConsumer() }} {{ featureConsumer()?.featureName }}
</div>
<ng-content select="[feature-consumer]"/>
`
})
export class GenericFeatureContainer {
featureConsumer = contentChild(FeatureConsumerComponent)
}

@Component({
selector: 'specific-feature-container',
imports: [GenericFeatureContainer],
template: `
<div>
specific feature container has a feature consumer? {{ !!featureConsumer() }} {{ featureConsumer()?.featureName }}
</div>
<generic-feature-container>
<ng-container feature-consumer>
<ng-content select="[feature-consumer]"/>
</ng-container>
</generic-feature-container>
`,
})
export class SpecificFeatureContainer {
featureConsumer = contentChild(FeatureConsumerComponent)
}

@Component({
selector: 'concrete-consumer',
imports: [SpecificFeatureContainer, FeatureConsumerComponent],
template: `
<specific-feature-container>
<ng-container feature-consumer>
<feature-consumer/>
</ng-container>
</specific-feature-container>
`,
})
export class ConcreteConsumer {}

@Component({
selector: 'app-root',
imports: [ConcreteConsumer],
template: `
<concrete-consumer/>
`,
})
export class Playground {}


bootstrapApplication(Playground);


we can see the DOM is displaying things correctly and it seems like the GenericFeatureContainer should be able to see the FeatureConsumer its displaying.



Continue reading...