chore(*): Apply review comments.

Author: MKirova

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

@@ -71,16 +71,10 @@ class IgxCustomNgElementStrategy extends ComponentNgElementStrategy {
             // 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);
+        if (contentChildren.length === 0) {
+            // no content children, emit event immediately, since there's nothing to be attached.
+            (this as any).componentRef?.instance?.childrenAttached?.emit();
         }
-        Promise.all(promises).then(() => {
-            (this as any).componentRef?.instance.contentChildrenReady.emit();
-        });
 
         let parentInjector: Injector;
         let parentAnchor: ViewContainerRef;
@@ -224,19 +218,6 @@ 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) {
@@ -333,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,7 +131,7 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
 
     grid1.data = northwindProducts;
     grid2.data = northwindProducts;
-    grid1.addEventListener('contentChildrenReady', () => {
+    grid1.addEventListener('childrenAttached', () => {
             console.log("Ready!");
             restoreState();
     });

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -1006,7 +1006,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * Emitted when content children are attached and collections in grid are updated.
      */
     @Output()
-    public contentChildrenReady = new EventEmitter<void>();
+    public childrenAttached = new EventEmitter<void>();
 
     /**
      * Emitted when the expanded state of a row gets changed.