angular/components

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

Open

#21,092 opened on Nov 19, 2020

View on GitHub
 (3 comments) (0 reactions) (0 assignees)TypeScript (24,044 stars) (6,650 forks)batch import
P3area: cdk/portaldocsgood first issuehelp wanted

Description

The official doc says:

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

Contributor guide

Tech stack
typescriptangular
Domain
documentationfrontend
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Angular basicsCdkPortal usage
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
90
Research direction
The issue suggests that the official documentation should be updated to clarify that `@ViewChild` only works with `<ng template cdkPortal>` syntax, not with `*cdkPortal`. A contributor should review the portal overview documentation page (https://material.angular.io/cdk/portal/overview#portals in practice) and modify the text to explicitly note this limitation. No code changes are required.