feat(elements-grid): Add content children ready 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?.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);
@@ -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?.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 = [];
@@ -210,10 +214,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) => {
@@ -290,7 +291,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>
@@ -318,7 +319,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>
@@ -426,9 +432,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

@@ -1043,6 +1043,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.
      *