feat(elements-grid): Add content children ready event.

IgniteUI · Jan 9, 2025 · 560f034 · 560f034
1 parent 509f5a6
commit 560f034
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/projects/igniteui-angular-elements/src/app/custom-strategy.ts b/projects/igniteui-angular-elements/src/app/custom-strategy.ts
@@ -66,9 +66,22 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
         (this as any).componentRef = {};
 
         const toBeOrphanedChildren = Array.from(element.children).filter(x => !this._componentFactory.ngContentSelectors.some(sel => x.matches(sel)));
+        const contentChildren = Array.from(element.children).filter(x => this._componentFactory.ngContentSelectors.some(sel => x.matches(sel)));
         for (const iterator of toBeOrphanedChildren) {
             // TODO: special registration OR config for custom
         }
+
+        const promises = [];
+        for (const contentChild of contentChildren) {
+            // these resolve after the parent, both the components needs to be initialized and the parent query schedule should complete before it is really ready.
+            const child = contentChild as IgcNgElement;
+            const promiseComponentReady = this.waitForCondition(() => (child.ngElementStrategy as any)?.componentRef && this.schedule.size == 0);
+            promises.push(promiseComponentReady);
+        }
+        Promise.all(promises).then(() => {
+            (this as any).componentRef?.instance.contentChildrenReady.emit();
+        });
+
         let parentInjector: Injector;
         let parentAnchor: ViewContainerRef;
         const parents: IgcNgElement[] = [];
@@ -211,6 +224,19 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
         }
     }
 
+    public waitForCondition(conditionFn: any, interval = 10) {
+        return new Promise<void>((resolve) => {
+            function checkCondition() {
+                if (conditionFn()) {
+                    resolve();
+                } else {
+                    setTimeout(checkCondition, interval);
+                }
+            }
+            checkCondition();
+        });
+    }
+
     public override setInputValue(property: string, value: any, transform?: (value: any) => any): void {
         if ((this as any).componentRef === null ||
             !(this as any).componentRef.instance) {

diff --git a/projects/igniteui-angular-elements/src/index.html b/projects/igniteui-angular-elements/src/index.html
@@ -131,6 +131,10 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
 
     grid1.data = northwindProducts;
     grid2.data = northwindProducts;
+    grid1.addEventListener('contentChildrenReady', () => {
+            console.log("Ready!");
+            restoreState();
+    });
     const categories = Array.from(new Set(northwindProducts.map(x => x.CategoryName)));
 
     let groupingExpression1 = [];
@@ -206,10 +210,7 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
         document.getElementById("saveState").addEventListener("click", saveState);
         document.getElementById("restoreState").addEventListener("click", restoreState);
         document.getElementById("toggleIcon").addEventListener("click", toggleIcon);
-        const stateComponent = document.getElementById('state');
-        stateComponent.options = {
-            paging: false
-        };
+
     });
 
     buttonGroup.addEventListener("igcSelect", (e) => {

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -1000,6 +1000,14 @@ export abstract class IgxGridBaseDirective implements GridType,
     @Output()
     public selectedRowsChange = new EventEmitter<any[]>();
 
+    /* blazorInclude */
+    /** @hidden @internal */
+    /**
+     * Emitted when content children are attached and collections in grid are updated.
+     */
+    @Output()
+    public contentChildrenReady = new EventEmitter<void>();
+
     /**
      * Emitted when the expanded state of a row gets changed.
      *
@@ -4930,7 +4938,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * @param value
      * @param condition
      * @param ignoreCase
-     * @deprecated in version 19.0.0. 
+     * @deprecated in version 19.0.0.
      */
     public filterGlobal(value: any, condition, ignoreCase?) {
         this.filteringService.filterGlobal(value, condition, ignoreCase);