From d208f903433b07b5bf23327a032441ad5ae75c7d Mon Sep 17 00:00:00 2001
From: yogeshwaran-c <ycyogesh183@gmail.com>
Date: Tue, 24 Feb 2026 01:03:16 +0530
Subject: [PATCH] docs(cdk/portal): clarify CdkPortal query pattern and use
 signal-based 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.
---
 src/cdk/portal/portal.md | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/cdk/portal/portal.md b/src/cdk/portal/portal.md
index 6c75a6bb6105..4b2080b353ef 100644
--- a/src/cdk/portal/portal.md
+++ b/src/cdk/portal/portal.md
@@ -46,8 +46,15 @@ Usage:
 </p>
 ```
 
-A component can use `@ViewChild` or `@ViewChildren` to get a reference to a
-`CdkPortal`.
+A component can use `viewChild` or `viewChildren` to get a reference to a
+`CdkPortal`. Query by the `CdkPortal` class rather than a template reference variable to ensure the
+query works with both syntaxes above.
+
+```ts
+import {CdkPortal} from '@angular/cdk/portal';
+
+readonly myPortal = viewChild(CdkPortal);
+```
 
 ##### `ComponentPortal`
 Used to create a portal from a component type.
@@ -68,11 +75,13 @@ Usage:
 ```
 
 ```ts
-@ViewChild('templatePortalContent') templatePortalContent: TemplateRef<unknown>;
+private _viewContainerRef = inject(ViewContainerRef);
+
+readonly templatePortalContent = viewChild<TemplateRef<unknown>>('templatePortalContent');
 
 ngAfterViewInit() {
   this.templatePortal = new TemplatePortal(
-    this.templatePortalContent,
+    this.templatePortalContent()!,
     this._viewContainerRef
   );
 }
@@ -87,9 +96,10 @@ Usage:
 ```
 
 ```ts
-@ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;
+readonly domPortalContent = viewChild<ElementRef<HTMLElement>>('domPortalContent');
+
 ngAfterViewInit() {
-  this.domPortal = new DomPortal(this.domPortalContent);
+  this.domPortal = new DomPortal(this.domPortalContent()!);
 }
 ```