From fd0185edd1e4abd6f5115fed38f79945dcd6569e Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Thu, 20 Feb 2025 20:51:44 -0500
Subject: [PATCH 1/2] fix: Row Detail preload comp should call destroy
 lifecycle

---
 src/app/examples/rowdetail-preload.component.ts  | 16 ++++++++++------
 .../extensions/slickRowDetailView.ts             | 12 ++++++++----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/app/examples/rowdetail-preload.component.ts b/src/app/examples/rowdetail-preload.component.ts
index e6bf86f0d..4d3b9b386 100644
--- a/src/app/examples/rowdetail-preload.component.ts
+++ b/src/app/examples/rowdetail-preload.component.ts
@@ -1,9 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 
 @Component({
-  template: `<h4>
-    <i class="mdi mdi-sync mdi-spin-1s mdi-50px"></i>
-    Loading...
-  </h4>`,
+  template: `<div class="container-fluid d-flex align-items-center" style="margin-top: 10px">
+    <i class="mdi mdi-sync mdi-spin mdi-50px"></i>
+    <h4>Loading...</h4>
+  </div>`,
 })
-export class RowDetailPreloadComponent {}
+export class RowDetailPreloadComponent implements OnDestroy {
+  ngOnDestroy(): void {
+    console.log('preload destroyed');
+  }
+}
diff --git a/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts b/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts
index f27c6f731..6b9572cc3 100644
--- a/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts
+++ b/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts
@@ -33,6 +33,7 @@ export interface CreatedView {
 export class SlickRowDetailView extends UniversalSlickRowDetailView {
   rowDetailContainer!: ViewContainerRef;
   protected _preloadComponent: Type<object> | undefined;
+  protected _preloadCompRef?: ComponentRef<any>;
   protected _views: CreatedView[] = [];
   protected _viewComponent!: Type<object>;
   protected _subscriptions: EventSubscription[] = [];
@@ -154,6 +155,9 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
 
         if (this.onAsyncEndUpdate) {
           this.eventHandler.subscribe(this.onAsyncEndUpdate, (e, args) => {
+            // destroy preload if exists
+            this._preloadCompRef?.destroy();
+
             // triggers after backend called "onAsyncResponse.notify()"
             this.renderViewModel(args?.item);
 
@@ -269,10 +273,11 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
       `${PRELOAD_CONTAINER_PREFIX}`
     ) as HTMLCollectionOf<HTMLElement>;
     if (this._preloadComponent && containerElements?.length >= 0) {
-      this.angularUtilService.createAngularComponentAppendToDom(
+      const preloadComp = this.angularUtilService.createAngularComponentAppendToDom(
         this._preloadComponent,
         containerElements[containerElements.length - 1]
       );
+      this._preloadCompRef = preloadComp.componentRef;
     }
   }
 
@@ -282,6 +287,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
       `${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`
     ) as HTMLCollectionOf<HTMLElement>;
     if (this._viewComponent && containerElements?.length > 0) {
+      // render row detail
       const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(
         this._viewComponent,
         containerElements[containerElements.length - 1],
@@ -312,9 +318,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
     const compRef = expandedView?.componentRef;
     if (compRef) {
       this.appRef.detachView(compRef.hostView);
-      if (compRef?.destroy) {
-        compRef.destroy();
-      }
+      compRef?.destroy();
       return expandedView;
     }
   }

From 972547b7c46666f8949e637ed7f7dc4dff171da8 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Thu, 20 Feb 2025 21:34:06 -0500
Subject: [PATCH 2/2] chore: fix failing unit tests

---
 .../extensions/__tests__/slickRowDetailView.spec.ts         | 6 +++++-
 .../angular-slickgrid/extensions/slickRowDetailView.ts      | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts
index 72af6cad9..ff413fcdd 100644
--- a/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts
+++ b/src/app/modules/angular-slickgrid/extensions/__tests__/slickRowDetailView.spec.ts
@@ -284,6 +284,9 @@ describe('SlickRowDetailView', () => {
         const onBeforeRowSpy = jest.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onBeforeRowDetailToggle');
         const onRowOutViewSpy = jest.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onRowOutOfViewportRange');
         const onRowBackViewSpy = jest.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onRowBackToViewportRange');
+        const appendSpy = jest
+          .spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom')
+          .mockReturnValue({ componentRef: { instance: jest.fn() } } as any);
 
         plugin.init(gridStub);
         plugin.onAfterRowDetailToggle = new SlickEvent();
@@ -295,6 +298,7 @@ describe('SlickRowDetailView', () => {
         //   { notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
         //   expect.anything()
         // );
+        expect(appendSpy).toHaveBeenCalled();
         expect(onAsyncRespSpy).not.toHaveBeenCalled();
         expect(onAsyncEndSpy).not.toHaveBeenCalled();
         expect(onAfterRowSpy).toHaveBeenCalledWith(expect.anything(), { item: columnsMock[0], expandedRows: [0], grid: gridStub });
@@ -406,7 +410,7 @@ describe('SlickRowDetailView', () => {
         const handlerSpy = jest.spyOn(plugin.eventHandler, 'subscribe');
         const appendSpy = jest
           .spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom')
-          .mockReturnValue({ componentRef: { instance: jest.fn() } } as any);
+          .mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any);
 
         plugin.init(gridStub);
         plugin.onBeforeRowDetailToggle = new SlickEvent();
diff --git a/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts b/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts
index 6b9572cc3..b08ef8620 100644
--- a/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts
+++ b/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts
@@ -318,7 +318,9 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
     const compRef = expandedView?.componentRef;
     if (compRef) {
       this.appRef.detachView(compRef.hostView);
-      compRef?.destroy();
+      if (compRef?.destroy) {
+        compRef.destroy();
+      }
       return expandedView;
     }
   }