diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html
index 7bd525bca367..a17f8992068d 100644
--- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html
+++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html
@@ -1,14 +1,14 @@
 <!-- This button is the origin to which the overlay is attached -->
-<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin #origin="cdkOverlayOrigin">
-  {{isOpen ? "Close" : "Open"}}
+<button (click)="isOpen.update(isOpen => !isOpen)" type="button" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+  {{isOpen() ? "Close" : "Open"}}
 </button>
 
 <!-- This template displays the overlay content and is connected to the button -->
 <ng-template
   cdkConnectedOverlay
   [cdkConnectedOverlayOrigin]="origin"
-  [cdkConnectedOverlayOpen]="isOpen"
-  (detach)="isOpen = false"
+  [cdkConnectedOverlayOpen]="isOpen()"
+  (detach)="isOpen.set(false)"
 >
   <ul class="example-list">
     <li>Item 1</li>
diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts
index d761287dcc01..9c0378a2b542 100644
--- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts
+++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {OverlayModule} from '@angular/cdk/overlay';
 
 /**
@@ -11,5 +11,5 @@ import {OverlayModule} from '@angular/cdk/overlay';
   imports: [OverlayModule],
 })
 export class CdkOverlayBasicExample {
-  isOpen = false;
+  isOpen = signal(false);
 }