The Wayback Machine - https://web.archive.org/web/20201203202240/https://github.com/angular/components/issues/21092
Skip to content

/ components

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.

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

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

Open
NicolasThierion opened this issue Nov 19, 2020 · 1 comment
Open

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

NicolasThierion opened this issue Nov 19, 2020 · 1 comment
Labels
P3 docs good first issue help wanted

Comments

@NicolasThierion
Copy link

@NicolasThierion NicolasThierion commented Nov 19, 2020

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
Copy link

@BobBDE BobBDE commented Dec 2, 2020 •
edited

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
P3 docs good first issue help wanted
3 participants
@crisbeto @NicolasThierion @BobBDE
You can’t perform that action at this time.