Merge pull request #1530 from ghiscoding/bugfix/preload-destroy

fix: Row Detail preload comp should call destroy lifecycle, fixes #589

Author: ghiscoding

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');
+  }
+}

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();

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],