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

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

@@ -66,9 +66,16 @@ 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
         }
+
+        if (contentChildren.length === 0) {
+            // no content children, emit event immediately, since there's nothing to be attached.
+            (this as any).componentRef?.instance?.childrenAttached?.emit();
+        }
+
         let parentInjector: Injector;
         let parentAnchor: ViewContainerRef;
         const parents: IgcNgElement[] = [];
@@ -307,6 +314,10 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
             list.reset(childRefs);
             list.notifyOnChanges();
         }
+        if (this.schedule.size === 0) {
+            // children are attached and collections are updated, emit event.
+            (this as any).componentRef?.instance?.childrenAttached?.emit();
+        }
     }
 
     private runQueryInDOM(element: HTMLElement, query: ContentQueryMeta): IgcNgElement[] {

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('childrenAttached', () => {
+            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) => {

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 childrenAttached = 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);