fix(elements): Do not destroy elements inside tmpl wrapper on detach.

Author: MKirova

projects/igniteui-angular-elements/src/app/custom-strategy.ts

@@ -233,6 +233,18 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
             }
             value = this.templateWrapper.addTemplate(value);
             // TODO: discard oldValue
+
+            // check template for any angular-element components
+            this.templateWrapper.templateRendered.subscribe((element) => {
+                const igComponents = this.config.flatMap(x => [
+                    x.selector,
+                    reflectComponentType(x.component).selector
+                ]).join(',');
+                const children = element.querySelectorAll(igComponents);
+                children?.forEach((c) => {
+                    c.ngElementStrategy.angularParent = componentRef;
+                });
+            });
         }
         if (componentRef && componentConfig?.boolProps?.includes(property)) {
             // bool coerce:

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, QueryList, TemplateRef, ViewChildren } from '@angular/core';
 import { TemplateRefWrapper } from './template-ref-wrapper';
 
 import { render, TemplateResult } from 'lit-html';
@@ -14,6 +14,7 @@ type TemplateFunction = (arg: any) => TemplateResult;
 export class TemplateWrapperComponent {
 
     public templateFunctions: TemplateFunction[] = [];
+    public templateRendered = new EventEmitter<any>();
 
     /**
      * All template refs
@@ -27,6 +28,7 @@ export class TemplateWrapperComponent {
 
     public litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) {
         render(templateFunc(arg), container);
+        this.templateRendered.emit(container);
     }
 
     public addTemplate(templateFunc: TemplateFunction): TemplateRef<any> {

projects/igniteui-angular-elements/src/index.html

@@ -195,7 +195,11 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
             <igc-combo ${ref(focusCallback)} style="width:100%; height:100%" .data=${northwindProducts} value-key="ProductName" @igcChange=${(e) => ctx.cell.editValue = e.detail.newValue} single-select>
             </igc-combo>
         `;
-        grid1.detailTemplate = (ctx) => html`<div><span class="categoryStyle">Stock: ${ctx.implicit.InStock}</span></div>`;
+        grid1.detailTemplate = (ctx) => {
+            return html`<div>
+            <igc-grid auto-generate="true"></igc-grid>
+        </div>`;
+        }
 
         grid2.querySelector('igc-column[field="ProductName"]').inlineEditorTemplate = (ctx) =>
             html`