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

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

@@ -65,10 +65,13 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
         // TODO: Fail handling or cancellation needed?
         (this as any).componentRef = {};
 
+        const contentChildrenTags = Array.from(element.children).filter(x => this._componentFactory.ngContentSelectors.some(sel => x.matches(sel))).map(x => x.tagName.toLocaleLowerCase());
         const toBeOrphanedChildren = 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
         }
+
+
         let parentInjector: Injector;
         let parentAnchor: ViewContainerRef;
         const parents: IgcNgElement[] = [];
@@ -150,6 +153,15 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
 
         this.detectChanges();
 
+        // check if there are any content children associated with a content query collection.
+        // if no, then just emit the event, otherwise we wait for the collection to be updated in updateQuery.
+        const contentChildrenTypes = this.config.filter(x => contentChildrenTags.indexOf(x.selector) !== -1).map(x => x.provideAs ?? x.component);
+        const contentQueryChildrenCollection = componentConfig.contentQueries.filter(x => contentChildrenTypes.includes(x.childType));
+        if (contentQueryChildrenCollection.length === 0) {
+            // no content children, emit event immediately, since there's nothing to be attached.
+            (this as any).componentRef?.instance?.childrenAttached?.emit();
+        }
+
         if (parentAnchor && parentInjector) {
             // attempt to attach the newly created ViewRef to the parents's instead of the App global
             const parentViewRef = parentInjector.get<ViewContainerRef>(ViewContainerRef);
@@ -307,6 +319,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) => {
@@ -286,7 +287,7 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
   </script>
   <!-- END IgxTreeGridComponent -->
 
-  <igc-hierarchical-grid id="hgrid1" moving="true" allow-filtering="true" filter-mode="excelStyleFilter" display-density="compact">
+  <igc-hierarchical-grid id="hgrid1" primary-key="ProjectId" moving="true" allow-filtering="true" filter-mode="excelStyleFilter" display-density="compact">
     <igc-grid-state id="state2"></igc-grid-state>
     <igc-column field="ProjectId" data-type="number" header="Project Id" sortable="true" selectable="false"></igc-column>
     <igc-column field="Name" data-type="string" header="Name" sortable="true" selectable="false"></igc-column>
@@ -314,7 +315,12 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
         <igc-grid-pinning-actions></igc-grid-pinning-actions>
         <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
     </igc-action-strip>
+    <igc-grid-state id="hgridState"></igc-grid-state>
   </igc-hierarchical-grid>
+  <div class="hgrid1-actions">
+    <button id="saveStateHierarchical">Save state</button>
+    <button id="restoreStateHierarchical">Restore</button>
+  </div>
 
   <!-- IgxPivotGridComponent -->
   <igc-pivot-grid id="pivotgrid1" default-expand-state="true" row-selection="single"></igc-pivot-grid>
@@ -416,9 +422,27 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
     import { html } from "/lit-html.js";
     // jump around vite import analysis with dynamic import url
     const hgridData = (await import(`/assets/${'data'}/projects-hgrid.js`)).default;
+    function saveStateHierarchical() {
+        const stateComponent = document.getElementById('hgridState');
+        const stringData = stateComponent.getStateAsString();
+        window.localStorage.setItem(`hgrid1-state`, stringData);
+    }
+
+    function restoreStateHierarchical() {
+        const stateComponent = document.getElementById('hgridState');
+        const stateData = window.localStorage.getItem(`hgrid1-state`);
+        if (stateData) {
+            const obj = JSON.parse(stateData);
+            stateComponent.applyState(obj);
+        }
+    }
     let hgrid = document.getElementById('hgrid1');
+    hgrid.addEventListener('childrenAttached', () => {
+            restoreStateHierarchical();
+    });
     hgrid.data = hgridData;
-
+    document.getElementById("saveStateHierarchical").addEventListener("click", saveStateHierarchical);
+    document.getElementById("restoreStateHierarchical").addEventListener("click", restoreStateHierarchical);
     let developersRowIsland = document.getElementById('DevelopersRowIsland');
     let virtualMachinesRowIsland = document.getElementById('VirtualMachinesRowIsland');
     virtualMachinesRowIsland.paginatorTemplate = (ctx) => html`

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