refactor(cdk-experimental/popover-edit): Remove use of zone onStable (#28674)

Author: mmalerba

src/cdk-experimental/popover-edit/edit-ref.ts

@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, OnDestroy, Self, NgZone} from '@angular/core';
+import {Injectable, OnDestroy, Self, afterNextRender, inject, Injector} from '@angular/core';
 import {ControlContainer} from '@angular/forms';
 import {Observable, Subject} from 'rxjs';
-import {take} from 'rxjs/operators';
 
 import {EditEventDispatcher} from './edit-event-dispatcher';
 
@@ -30,10 +29,11 @@ export class EditRef<FormValue> implements OnDestroy {
   /** The value to set the form back to on revert. */
   private _revertFormValue: FormValue;
 
+  private _injector = inject(Injector);
+
   constructor(
     @Self() private readonly _form: ControlContainer,
     private readonly _editEventDispatcher: EditEventDispatcher<EditRef<FormValue>>,
-    private readonly _ngZone: NgZone,
   ) {
     this._editEventDispatcher.setActiveEditRef(this);
   }
@@ -44,14 +44,17 @@ export class EditRef<FormValue> implements OnDestroy {
    * applicable.
    */
   init(previousFormValue: FormValue | undefined): void {
-    // Wait for the zone to stabilize before caching the initial value.
+    // Wait for the next render before caching the initial value.
     // This ensures that all form controls have been initialized.
-    this._ngZone.onStable.pipe(take(1)).subscribe(() => {
-      this.updateRevertValue();
-      if (previousFormValue) {
-        this.reset(previousFormValue);
-      }
-    });
+    afterNextRender(
+      () => {
+        this.updateRevertValue();
+        if (previousFormValue) {
+          this.reset(previousFormValue);
+        }
+      },
+      {injector: this._injector},
+    );
   }
 
   ngOnDestroy(): void {

src/cdk-experimental/popover-edit/table-directives.ts

@@ -9,6 +9,7 @@ import {FocusTrap} from '@angular/cdk/a11y';
 import {OverlayRef, OverlaySizeConfig, PositionStrategy} from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {
+  afterRender,
   AfterViewInit,
   Directive,
   ElementRef,
@@ -68,12 +69,18 @@ const MOUSE_MOVE_THROTTLE_TIME_MS = 10;
 export class CdkEditable implements AfterViewInit, OnDestroy {
   protected readonly destroyed = new Subject<void>();
 
+  private _rendered = new Subject();
+
   constructor(
     protected readonly elementRef: ElementRef,
     protected readonly editEventDispatcher: EditEventDispatcher<EditRef<unknown>>,
     protected readonly focusDispatcher: FocusDispatcher,
     protected readonly ngZone: NgZone,
-  ) {}
+  ) {
+    afterRender(() => {
+      this._rendered.next();
+    });
+  }
 
   ngAfterViewInit(): void {
     this._listenForTableEvents();
@@ -82,6 +89,7 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
   ngOnDestroy(): void {
     this.destroyed.next();
     this.destroyed.complete();
+    this._rendered.complete();
   }
 
   private _listenForTableEvents(): void {
@@ -126,7 +134,7 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
       // Keep track of rows within the table. This is used to know which rows with hover content
       // are first or last in the table. They are kept focusable in case focus enters from above
       // or below the table.
-      this.ngZone.onStable
+      this._rendered
         .pipe(
           // Optimization: ignore dom changes while focus is within the table as we already
           // ensure that rows above and below the focused/active row are tabbable.