feat(elements,grid): Add content children resolved event.

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

@@ -82,6 +82,7 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
         // set componentRef to non-null to prevent DOM moves from re-initializing
         // 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) {
@@ -166,6 +167,15 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
         // TODO(D.P.): Temporary maintain pre-check for ngAfterViewInit handling on _init flag w/ ngDoCheck interaction of row island
         (this as any).componentRef.changeDetectorRef.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?.childrenResolved?.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);
@@ -331,6 +341,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?.childrenResolved?.emit();
+        }
     }
 
     private runQueryInDOM(element: HTMLElement, query: ContentQueryMeta): IgcNgElement[] {

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

@@ -143,6 +143,10 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
 
         grid1.data = northwindProducts;
         grid2.data = northwindProducts;
+        grid1.addEventListener('childrenResolved', () => {
+            console.log("Ready!");
+            restoreState();
+        });
         const categories = Array.from(new Set(northwindProducts.map(x => x.CategoryName)));
 
         let groupingExpression1 = [];
@@ -289,6 +293,41 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
         </igc-action-strip>
     </igc-tree-grid>
 
+  <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>
+    <igc-column field="StartDate" data-type="date" header="Start Date" sortable="true" selectable="false"></igc-column>
+    <igc-column field="EndDate" data-type="date" header="End Date" sortable="true" selectable="false"></igc-column>
+    <igc-column field="IsPostponed" data-type="boolean" header="Postponed" sortable="true" selectable="false"></igc-column>
+
+    <igc-row-island id="DevelopersRowIsland" key="Developers">
+        <igc-column field="Name" header="Name" sortable="true"></igc-column>
+        <igc-column-group header="Position Information">
+            <igc-column-group header="Position Details" collapsible>
+                <igc-column field="Position" header="Position" sortable="true" visible-when-collapsed></igc-column>
+                <igc-column field="Salary" header="Salary" sortable="true" visible-when-collapsed="false"></igc-column>
+            </igc-column-group>
+            <igc-column field="HireDate" header="HireDate" data-type="date" sortable="true"></igc-column>
+        </igc-column-group>
+        <igc-action-strip>
+            <igc-grid-pinning-actions></igc-grid-pinning-actions>
+            <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
+        </igc-action-strip>
+        <igc-row-island auto-generate id="VirtualMachinesRowIsland" key="VirtualMachines"></igc-row-island>
+    </igc-row-island>
+    <igc-paginator per-page="10"></igc-paginator>
+    <igc-action-strip>
+        <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>
+
     <script src="assets/data/tree-grid-ds.js"></script>
     <script>
         treegrid1.data = treeGridDS;
@@ -444,9 +483,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('childrenResolved', () => {
+            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/grids/grid/src/grid-base.directive.ts

@@ -1014,6 +1014,14 @@ export abstract class IgxGridBaseDirective implements GridType,
     @Output()
     public selectedRowsChange = new EventEmitter<any[]>();
 
+    /* blazorInclude */
+    /** @hidden @internal */
+    /**
+     * Emitted when content children are resolved and collections in grid are updated.
+     */
+    @Output()
+    public childrenResolved = new EventEmitter<void>();
+
     /**
      * Emitted when the expanded state of a row gets changed.
      *