docs-bug(CdkPortal): @ViewChild() returns undefined when using *cdkPortal instead of <ng-template cdkPortal>

[NicolasThierion]

The official doc says:

The content of this template is captured by the portal.

The content of this template is captured by the portal.

A component can use @ViewChild or @ViewChildren to get a reference to a CdkPortal.

However, @ViewChild('theElementRef') binds to undefined when I use the *cdkPortal notation,
while it works when I use <ng-template cdkPortal>

I suspect *cdkPortal makes the element to leave the page before afterViewInit().
Maybe the documentation should encourage using the <ng-template> form instead.

Affected documentation page: https://material.angular.io/cdk/portal/overview#portals-in-practice

[BobBDE]

Hi,
You can use the ViewChild with the CdkPortal reference instead of template.

@ViewChild(CdkPortal) portal!: CdkPortal;

Or if you want to access the TemplateRef and not the CdkPortal:

@ViewChild(CdkPortal, {read: TemplateRef}) templateRef!: TemplateRef<any>;

This works with both cdkPortal notation (tested in v11)

[sumantamangg]

I have submitted a PR for this.

So, I just basically removed the whole part where the doc says to use the <*cdkPortal>. I guess that's the fix??

I am new to this and I know, I should have asked first if that was the right solution. But, I am happy to make changes as suggested.

[andrewseguin]

Can you provide a reproduction for the issue you are facing? I believe @BobBDE had the right suggestion to grab the CdkPortal instead of the reference.