fix(elements): attach nested elements to their parent's view - 22.1.x

[mddragnev]

Closes #17598

Description

Nested custom elements are now attached into their parent element's view instead of being attached to the ApplicationRef as standalone roots.

IgxCustomNgElementStrategy resolves a ViewContainerRef from the parent component's injector (a container anchored at the parent's host element) and inserts the child's host view there.

Because the anchor is no longer needed, the @igxElementsAnchor plumbing is removed: the anchor property on IgxGridBaseDirective and the <div #sink> markup in the grid, tree grid, hierarchical grid, pivot grid and row island templates.

The DOM position restore that follows the insert now derives its reference node from the last of the host view's root nodes rather than from element.nextSibling. ViewContainerRef.insert() relocates every root node of the view, and some components (igc-action-strip, igc-grid-state) have a trailing anchor comment in addition to the element - using it as the reference node makes insertBefore throw NotFoundError once it has been moved.

Motivation / Context

Elements runs with zoneless change detection, which only walks views reachable from whatever was marked dirty. A detached root is unreachable from its parent, so a grid's own notifyChanges()/markForCheck() never refreshed nested elements and they kept rendering stale state until something ticked their own root.

This surfaced in the grid toolbar actions, which bind directly to live grid state rather than to inputs:

• igc-grid-toolbar-pinning kept showing the old pinnedColumnsCount after pinning/unpinning a column
• igc-grid-toolbar-advanced-filtering kept showing the old column count after applying a filter

The same scenarios work under zone.js, where every tick re-checks all attached views regardless of the view hierarchy, and in a plain Angular app, where these components are genuine descendants of the grid's view.

Type of Change (check all that apply):

• Bug fix
• New functionality
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Refactoring (no functional changes)
• Documentation
• Demos
• CI/CD
• Tests
• Changelog
• Skills/Agents

Component(s) / Area(s) Affected:

Grid, Tree Grid, Hierarchical Grid, Pivot Grid

How Has This Been Tested?

• Unit tests
• Manual testing
• Automated e2e tests

Three tests added to custom-strategy.spec.ts, all verified to fail when the behaviour is reverted:

• View hierarchy - only the grid's host view is among the ApplicationRef root views; toolbar, title, actions, hiding, pinning, column and paginator are not.
• DOM position - nothing is stranded next to the grid after the insert, parent/child relationships and sibling order are kept as authored, and the projected paginator keeps its position deeper inside the grid.
• Change detection - pinning/unpinning a column through the grid API alone refreshes pinnedColumnsCount in the nested toolbar action, with no input or event reaching that element.

Test Configuration:

• Angular version:
• Browser(s):
• OS:

Screenshots / Recordings

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code (test guidelines)
• This PR includes API docs for newly added methods/properties (api docs guidelines)
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes (migrations guidelines)
• This PR includes behavioral changes and the feature specification has been updated with them
• Accessibility (ARIA, keyboard navigation, focus management) has been verified

[Copilot]

🔵 Needs a closer look

The changes require final human review because they are too complex or risky for automated approval.

Pull request overview

Updates Angular Elements so nested grid elements participate in their parent’s view hierarchy and refresh correctly under zoneless change detection.

Changes:

• Replaces anchor-based attachment with parent ViewContainerRef insertion.
• Removes obsolete grid and row-island sink anchors.
• Adds view hierarchy, DOM position, and pinning refresh tests.

File summaries

File	Description
projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html	Updated as part of this pull request.
projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html	Updated as part of this pull request.
projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html	Updated as part of this pull request.
projects/igniteui-angular/grids/grid/src/grid.component.html	Updated as part of this pull request.
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts	Updated as part of this pull request.
projects/igniteui-angular-elements/src/lib/grids/row-island.component.ts	Updated as part of this pull request.
projects/igniteui-angular-elements/src/app/custom-strategy.ts	Updated as part of this pull request.
projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts	Updated as part of this pull request.

Review details

• Files reviewed: 8/8 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.