fix(template-outlet): change strategy to destroy cache

Author: pmoleri

projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts

@@ -78,6 +78,15 @@ export class IgxTemplateOutletDirective implements OnChanges, OnDestroy {
         }
     }
 
+    /** Claims the created view so it won't be destroyed by this directive */
+    public claimOwnership(type: string, id: string, viewRef: EmbeddedViewRef<unknown>) {
+        const embViewCollection = this._embeddedViewsMap.get(type);
+        const embView = embViewCollection?.get(id);
+        if (embView && embView === viewRef) {
+            embViewCollection.delete(id);
+        }
+    }
+
     private _recreateView() {
         const prevIndex = this._viewRef ? this._viewContainerRef.indexOf(this._viewRef) : -1;
         // detach old and create new
@@ -88,7 +97,6 @@ export class IgxTemplateOutletDirective implements OnChanges, OnDestroy {
         if (this.igxTemplateOutlet) {
             this._viewRef = this._viewContainerRef.createEmbeddedView(
                 this.igxTemplateOutlet, this.igxTemplateOutletContext);
-            this.viewCreated.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
             const tmplId = this.igxTemplateOutletContext['templateID'];
             if (tmplId) {
                 // if context contains a template id, check if we have a view for that template already stored in the cache
@@ -101,6 +109,7 @@ export class IgxTemplateOutletDirective implements OnChanges, OnDestroy {
                         new Map([[this.igxTemplateOutletContext['templateID'].id, this._viewRef]]));
                 }
             }
+            this.viewCreated.emit({ owner: this, view: this._viewRef, context: this.igxTemplateOutletContext });
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -1,7 +1,7 @@
 import {
     Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren,
     QueryList, ViewChild, TemplateRef, DoCheck, AfterContentInit, HostBinding,
-    OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute
+    OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute, OnDestroy,
 } from '@angular/core';
 import { NgIf, NgTemplateOutlet, NgClass, NgFor, NgStyle } from '@angular/common';
 
@@ -47,7 +47,7 @@ import { IgxCircularProgressBarComponent } from '../../progressbar/progressbar.c
 import { IgxOverlayOutletDirective, IgxToggleDirective } from '../../directives/toggle/toggle.directive';
 import { IgxSummaryRowComponent } from '../summaries/summary-row.component';
 import { IgxGridRowComponent } from './grid-row.component';
-import { IgxTemplateOutletDirective } from '../../directives/template-outlet/template_outlet.directive';
+import { IgxTemplateOutletDirective, IViewChangeEventArgs } from '../../directives/template-outlet/template_outlet.directive';
 import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive';
 import { IgxGridDragSelectDirective } from '../selection/drag-select.directive';
 import { IgxGridBodyDirective } from '../grid.common';
@@ -157,7 +157,7 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs {
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class IgxGridComponent extends IgxGridBaseDirective implements GridType, OnInit, DoCheck, AfterContentInit, AfterViewInit {
+export class IgxGridComponent extends IgxGridBaseDirective implements GridType, OnInit, DoCheck, AfterContentInit, AfterViewInit, OnDestroy {
     /**
      * Emitted when a new chunk of data is loaded from virtualization.
      *
@@ -443,7 +443,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         return this.gridAPI as IgxGridAPIService;
     }
 
-    private childDetailTemplates: Map<any, any> = new Map();
+    private childDetailTemplates: Map<any, IViewChangeEventArgs> = new Map();
 
     /**
      * @hidden @internal
@@ -953,16 +953,19 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    public viewCreatedHandler(args) {
+    public viewCreatedHandler(args: IViewChangeEventArgs) {
         if (args.context.templateID.type === 'detailRow') {
             this.childDetailTemplates.set(args.context.$implicit, args);
+
+            // Claim ownership so life-cycle will be managed by the Grid
+            args.owner.claimOwnership(args.context.templateID.type, args.context.templateID.id, args.view);
         }
     }
 
     /**
      * @hidden @internal
      */
-    public viewMovedHandler(args) {
+    public viewMovedHandler(args: IViewChangeEventArgs) {
         if (args.context.templateID.type === 'detailRow') {
             // view was moved, update owner in cache
             const key = args.context.$implicit;
@@ -1071,6 +1074,14 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         super.ngDoCheck();
     }
 
+    public override ngOnDestroy(): void {
+        super.ngOnDestroy();
+        for (const template of this.childDetailTemplates.values()) {
+            template.view.destroy();
+        }
+        this.childDetailTemplates.clear();
+    }
+
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts

@@ -879,6 +879,11 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
             this._clearSeletionHighlights();
         }
         super.ngOnDestroy();
+
+        for (const template of this.childGridTemplates.values()) {
+            template.view.destroy();
+        }
+        this.childGridTemplates.clear();
     }
 
     /**
@@ -1057,6 +1062,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         if (this.isChildGridRecord(args.context.$implicit)) {
             const key = args.context.$implicit.rowID;
             this.childGridTemplates.set(key, args);
+
+            // Claim ownership so life-cycle will be managed by the Grid
+            args.owner.claimOwnership(args.context.templateID.type, args.context.templateID.id, args.view);
         }
     }