Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
560f034
feat(elements-grid): Add content children ready event.
Jan 9, 2025
13053be
chore(*): Apply review comments.
Jan 14, 2025
6516dfe
chore(*): Add condition based on content children with rel. query col…
Jan 15, 2025
8b5559b
chore(*): Add scenario to test hgrid as well.
Jan 15, 2025
2fa6de3
Merge branch 'master' into mkirova/feat-15050
Jun 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions projects/igniteui-angular-elements/src/app/custom-strategy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might need some more refinement since ngContentSelectors will give all projected children and not all of those need to have a content query (e.g. the state component right now) which won't schedule any query updates and thus won't trigger the event at all.
Should be possible to further filter the children through their matching config, need the component or provideAs to match those against the componentConfig.contentQueries[n].childType-s so we know for sure a child is expected to run query update and leave the emit for that.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, further annoying bit can be the descendants bit on the query, might need to account for that as well

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();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, might want to emit this after the component has actually initialized - around the end of this method.

}

let parentInjector: Injector;
let parentAnchor: ViewContainerRef;
const parents: IgcNgElement[] = [];
Expand Down Expand Up @@ -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[] {
Expand Down
9 changes: 5 additions & 4 deletions projects/igniteui-angular-elements/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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) => {
Expand Down
10 changes: 9 additions & 1 deletion projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down Expand Up @@ -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);
Expand Down
Loading