fix(template): improve DataSource lifecycle management in RxVirtualFor

friendlyAce · friendlyAce · commit 09270f99f65d · 2025-05-24T22:28:28.000+02:00
- Renamed potentialSignalOrObservable to potentialSignalOrObservableOrDataSource
- Move DataSource disconnect from subscription to ngOnDestroy lifecycle
- Add disconnectDataSource() method for centralized cleanup logic
- Ensure disconnect and cleanup of previous data source on data source input changes to prevent memory leaks
diff --git a/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts b/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts
@@ -216,6 +216,11 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>>
     optional: true,
   });
 
+  /** @internal */
+  private connectedDataSource?: DataSource<T>;
+  /** @internal */
+  private collectionViewer?: CollectionViewer;
+
   /** @internal */
   private _differ?: IterableDiffer<T>;
 
@@ -237,46 +242,49 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>>
    *     [hero]="hero"></app-hero>
    * </rx-virtual-scroll-viewport>
    *
-   * @param potentialSignalOrObservable
+   * @param potentialSignalOrObservableOrDataSource
    */
   @Input()
   set rxVirtualForOf(
-    potentialSignalOrObservable:
+    potentialSignalOrObservableOrDataSource:
       | Observable<(U & NgIterable<T>) | undefined | null>
       | Signal<(U & NgIterable<T>) | undefined | null>
       | DataSource<T>
       | (U & NgIterable<T>)
       | null
       | undefined,
   ) {
-    if (isSignal(potentialSignalOrObservable)) {
+    if (isSignal(potentialSignalOrObservableOrDataSource)) {
       this.staticValue = undefined;
       this.renderStatic = false;
       this.observables$.next(
-        toObservable(potentialSignalOrObservable, { injector: this.injector }),
+        toObservable(potentialSignalOrObservableOrDataSource, {
+          injector: this.injector,
+        }),
       );
-    } else if (this.isDataSource(potentialSignalOrObservable)) {
+    } else if (this.isDataSource(potentialSignalOrObservableOrDataSource)) {
+      this.disconnectDataSource();
+
       this.staticValue = undefined;
       this.renderStatic = false;
 
       const collectionViewer: CollectionViewer = {
         viewChange: this.scrollStrategy.renderedRange$,
       };
 
+      this.collectionViewer = collectionViewer;
+      this.connectedDataSource = potentialSignalOrObservableOrDataSource;
+
       this.observables$.next(
-        potentialSignalOrObservable.connect(collectionViewer),
+        potentialSignalOrObservableOrDataSource.connect(collectionViewer),
       );
-
-      this._destroy$.pipe(take(1)).subscribe(() => {
-        potentialSignalOrObservable.disconnect(collectionViewer);
-      });
-    } else if (!isObservable(potentialSignalOrObservable)) {
-      this.staticValue = potentialSignalOrObservable;
+    } else if (!isObservable(potentialSignalOrObservableOrDataSource)) {
+      this.staticValue = potentialSignalOrObservableOrDataSource;
       this.renderStatic = true;
     } else {
       this.staticValue = undefined;
       this.renderStatic = false;
-      this.observables$.next(potentialSignalOrObservable);
+      this.observables$.next(potentialSignalOrObservableOrDataSource);
     }
   }
 
@@ -290,8 +298,7 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>>
       | undefined,
   ): value is DataSource<T> {
     return (
-      value !== null &&
-      value !== undefined &&
+      value != null &&
       'connect' in value &&
       typeof value.connect === 'function' &&
       !(value instanceof ConnectableObservable)
@@ -677,8 +684,18 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>>
     }
   }
 
+  /** @internal */
+  private disconnectDataSource(): void {
+    if (this.connectedDataSource && this.collectionViewer) {
+      this.connectedDataSource.disconnect(this.collectionViewer);
+      this.connectedDataSource = undefined;
+      this.collectionViewer = undefined;
+    }
+  }
+
   /** @internal */
   ngOnDestroy() {
+    this.disconnectDataSource();
     this._destroy$.next();
     this.templateManager.detach();
   }
