Skip to content

Comments

docs(cdk/portal): clarify CdkPortal query pattern and use signal-based viewChild#32829

Open
yogeshwaran-c wants to merge 1 commit intoangular:mainfrom
yogeshwaran-c:docs/portal-viewchild-guidance
Open

docs(cdk/portal): clarify CdkPortal query pattern and use signal-based viewChild#32829
yogeshwaran-c wants to merge 1 commit intoangular:mainfrom
yogeshwaran-c:docs/portal-viewchild-guidance

Conversation

@yogeshwaran-c
Copy link

What kind of change does this PR introduce?

Documentation improvement

What is the current behavior?

The portal documentation says a component can use @ViewChild or @ViewChildren to get a reference to a CdkPortal, but does not show how. Users who try using a template reference variable (e.g., @ViewChild('myRef')) find it returns undefined when using the *cdkPortal structural directive syntax.

Additionally, the TemplatePortal and DomPortal examples use the legacy @ViewChild decorator instead of signal-based viewChild queries.

Closes #21092

What is the new behavior?

  • Clarifies that CdkPortal should be queried by class (not template reference variable) to work with both <ng-template cdkPortal> and *cdkPortal syntaxes
  • Adds an explicit code example showing viewChild(CdkPortal)
  • Updates TemplatePortal example to use viewChild signal query and inject(ViewContainerRef)
  • Updates DomPortal example to use viewChild signal query

Additional context

The previous PR #25127 attempted to fix this by removing the *cdkPortal syntax from the docs entirely, but was closed. This PR takes a different approach by keeping both syntaxes and adding guidance on the correct query pattern, as suggested in the issue comments.

…d viewChild

Update the portal documentation to clarify that CdkPortal should be
queried by class rather than template reference variable, which avoids
the undefined result when using *cdkPortal structural directive syntax.
Also update all code examples to use signal-based viewChild queries
and inject() instead of decorator-based @ViewChild.
@angular-robot angular-robot bot added area: docs Related to the documentation area: cdk/portal labels Feb 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: cdk/portal area: docs Related to the documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant