ContentChild undefined when calling inside nested component

Question

I have the following component structure:

in app.component.html:

<placeholder *ngFor="...">
  <visual-comp [id]="..."></visual-comp>
</placeholder>

in placeholder.component.html:

<renderer>
  <ng-content></ng-content>
</renderer>

in renderer.component.html:

<ng-content></ng-content>

The problem is the following, when I'm trying to access <visual-comp ...></visual-comp> projected inside the rederer component, using @ContentChild, I'm getting undefined, while in placeholder.component.ts I can access it.

So here's pat of my renderer.component.ts:

@Component(...)
export class RendererComponent implements AfterContentInit {
  @ContentChild(VisualCompComponent) public _visualCmp!: VisualCompComponent;

  ngAfterContentInit(): void {
    console.log('Visual Component', this._visualCmp); // Outputs: Visual Component undefined
  }
}

Any ideas?

Telman Telman · Accepted Answer · 2022-07-17T18:44:52

You can use ContentChildren with a descendants parameter instead.

@ContentChildren(VisualCompComponent, {descendants: true}) _visualCmps!: QueryList<VisualCompComponent>;

The only difference is that in this case you receive a QueryList of elements, not a single element.

Otherwise, if you don't want to use ContentChildren, I think you will need to have a public reference to the content in the VisualCompComponent and then access that public reference from the parent component.

ContentChild undefined when calling inside nested component

1 Answers