fix(elements): Handle template setting of components passed as event args through proxy. (#15649)

Author: skrustev

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

@@ -141,6 +141,29 @@ describe('Elements: ', () => {
             expect(paginator.totalRecords).toEqual(gridEl.data.length);
         });
 
+        it(`should correctly apply column template when set through event`, async () => {
+            const gridEl = document.createElement("igc-grid");
+
+            const columnID = document.createElement("igc-column");
+            columnID.setAttribute("field", "ProductID");
+            gridEl.appendChild(columnID);
+            const columnName = document.createElement("igc-column");
+            columnName.setAttribute("field", "ProductName");
+            gridEl.appendChild(columnName);
+
+            gridEl.data = SampleTestData.foodProductData();
+            gridEl.addEventListener("columnInit", (args: CustomEvent<any>) => {
+                args.detail.headerTemplate = (ctx) => html`<span>Templated ${args.detail.field}</span>`;
+            });
+            testContainer.appendChild(gridEl);
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
+
+            const header = document.getElementsByTagName("igx-grid-header").item(0) as HTMLElement;
+            expect(header.innerText).toEqual('Templated ProductID');
+        });
+
         it(`should initialize pivot grid with state persistence component`, async () => {
             const gridEl = document.createElement("igc-pivot-grid");
 

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

@@ -1,8 +1,8 @@
-import { ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentRef, DestroyRef, Injector, OnChanges, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
+import { ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentRef, DestroyRef, EventEmitter, Injector, OnChanges, QueryList, Type, ViewContainerRef, reflectComponentType } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgElement } from '@angular/elements';
-import { fromEvent } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { NgElement, NgElementStrategyEvent } from '@angular/elements';
+import { fromEvent, Observable } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 import { ComponentConfig, ContentQueryMeta } from './component-config';
 
 import { ComponentNgElementStrategy, ComponentNgElementStrategyFactory, extractProjectableNodes, isFunction } from './ng-element-strategy';
@@ -29,6 +29,8 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
     /** Cached child instances per query prop. Used for dynamic components's child templates that normally persist in Angular runtime */
     protected cachedChildComponents: Map<string, ComponentRef<any>[]> = new Map();
     private setComponentRef: (value: ComponentRef<any>) => void;
+    /** The maximum depth at which event arguments are processed and angular components wrapped with Proxies, that handle template set */
+    private maxEventProxyDepth = 3;
 
     /**
      * Resolvable component reference.
@@ -405,6 +407,94 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
             super.disconnect();
         }
     }
+
+    //#region Handle event args that return reference to components, since they return angular ref and not custom elements.
+    /** Sets up listeners for the component's outputs so that the events stream emits the events. */
+    protected override initializeOutputs(componentRef: ComponentRef<any>): void {
+        const eventEmitters: Observable<NgElementStrategyEvent>[] = this._componentFactory.outputs.map(
+            ({ propName, templateName }) => {
+                const emitter: EventEmitter<any> = componentRef.instance[propName];
+                return emitter.pipe(map((value: any) => ({ name: templateName, value: this.patchOutputComponents(propName, value) })));
+            },
+        );
+
+        (this as any).eventEmitters.next(eventEmitters);
+    }
+
+    protected patchOutputComponents(eventName: string, eventArgs: any) {
+        // Single out only `columnInit` event for now. If more events pop up will require a config generation.
+        if (eventName !== "columnInit") {
+            return eventArgs;
+        }
+        return this.createProxyForComponentValue(eventArgs, 1).value;
+    }
+
+    /**
+     * Nested search of event args that contain angular components and replace them with proxies.
+     * If event args are array of angular component instances should return array of proxies of each of those instances.
+     * If event args are object that has a single property being angular component should return same object except the angular component being a proxy of itself.
+     */
+    protected createProxyForComponentValue(value: any, depth: number): { value: any, hasProxies: boolean } {
+        if (depth > this.maxEventProxyDepth) {
+            return { value, hasProxies: false };
+        }
+
+        let hasProxies = false;
+        // TO DO!: Not very reliable as it is a very internal API and could be subject to change. If something comes up, should be changed.
+        if (value?.__ngContext__) {
+            const componentConfig = this.config.find((info: ComponentConfig) => value.constructor === info.component);
+            if (componentConfig?.templateProps) {
+                return { value: this.createElementsComponentProxy(value, componentConfig), hasProxies: true };
+            }
+        } else if (Array.isArray(value)) {
+            if (!value[0]) {
+                return { value, hasProxies: false };
+            } else {
+                // For array limit their parsing to first level and check if first item has created proxy inside.
+                const firstItem = this.createProxyForComponentValue(value[0], this.maxEventProxyDepth);
+                if (firstItem.hasProxies) {
+                    const mappedArray = value.slice(1, value.length).map(item => this.createProxyForComponentValue(item, depth + 1));
+                    mappedArray.unshift(firstItem);
+                    return { value: mappedArray, hasProxies: true };
+                }
+            }
+        } else if (typeof value === "object" && Object.entries(value).length && !(value instanceof Event)) {
+            for (const [key, item] of Object.entries(value)) {
+                if (!item) {
+                    value[key] = item;
+                } else {
+                    const parsedItem = this.createProxyForComponentValue(item, depth + 1);
+                    value[key] = parsedItem.value;
+                    hasProxies = parsedItem.hasProxies || hasProxies;
+                }
+            }
+        }
+
+        return { value, hasProxies };
+    }
+
+    /** Create proxy for a component that handles setting template props, making sure it provides correct TemplateRef and not Lit template */
+    protected createElementsComponentProxy(component: any, config: ComponentConfig) {
+        const parentThis = this;
+        return new Proxy(component, {
+            set(target: any, prop: string, newValue: any) {
+                // For now handle only template props
+                if (config.templateProps.includes(prop)) {
+                    const oldRef = target[prop];
+                    const oldValue = oldRef && parentThis.templateWrapper.getTemplateFunction(oldRef);
+                    if (oldValue === newValue) {
+                        newValue = oldRef;
+                    } else {
+                        newValue = parentThis.templateWrapper.addTemplate(newValue);
+                    }
+                }
+                target[prop] = newValue;
+
+                return true;
+            }
+        });
+    }
+    //#endregion
 }
 
 /**

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

@@ -324,7 +324,9 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
   <igc-pivot-grid id="pivotgrid1" default-expand-state="true" row-selection="single"></igc-pivot-grid>
 
   <script src="assets/data/pivot-data.js"></script>
-  <script>
+  <script type="module">
+    import { html, nothing } from "/lit-html.js";
+
     document.addEventListener('DOMContentLoaded', () => {
         const clear = (el) => el === 0 || Boolean(el);
         pivotgrid1.pivotConfiguration = {
@@ -413,6 +415,10 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
         };
     });
     pivotgrid1.data = pivotData;
+    pivotgrid1.addEventListener("columnInit", (args) => {
+        const col = args.detail;
+        col.headerTemplate = (ctx) => html`<span>${col.field}_</span>`;
+    });
   </script>
   <!-- END IgxPivotGridComponent -->