Skip to content

Move all elements specific members from the angular grids into angular-element's source. #15304

Open
MayaKirova wants to merge 31 commits intomasterfrom
mkirova/feat-15235
Open

Move all elements specific members from the angular grids into angular-element's source. #15304
MayaKirova wants to merge 31 commits intomasterfrom
mkirova/feat-15235

Conversation

@MayaKirova
Copy link
Copy Markdown
Contributor

Closes #15235

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

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

skrustev
skrustev previously approved these changes Feb 13, 2025
@MarielaTihova MarielaTihova added the ✅ status: verified Applies to PRs that have passed manual verification label Mar 17, 2025
@dkamburov
Copy link
Copy Markdown
Contributor

@MayaKirova there is a conflict here

skrustev
skrustev previously approved these changes Apr 15, 2025
@dkamburov
Copy link
Copy Markdown
Contributor

@MayaKirova please resolve the conflicts here

@github-actions
Copy link
Copy Markdown

There has been no recent activity and this PR has been marked inactive.

@github-actions github-actions bot added the status: inactive Used to stale issues and pull requests label Aug 17, 2025
@dkamburov dkamburov removed the status: inactive Used to stale issues and pull requests label Aug 19, 2025
@skrustev skrustev self-requested a review August 26, 2025 11:12
skrustev
skrustev previously approved these changes Aug 26, 2025
@dkamburov
Copy link
Copy Markdown
Contributor

@MayaKirova there is a conflict here

@MayaKirova MayaKirova requested a review from skrustev March 30, 2026 11:32
@MayaKirova MayaKirova added ❌ status: awaiting-test PRs awaiting manual verification and removed ✅ status: verified Applies to PRs that have passed manual verification labels Mar 31, 2026
…ect (#17140)

Co-authored-by: Damyan Petev <damyanpetev@users.noreply.github.com>
@dkamburov dkamburov assigned skrustev and unassigned MarielaTihova Apr 1, 2026
Copilot AI review requested due to automatic review settings April 1, 2026 09:37
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR moves Elements-/codegen-specific Grid members (Blazor/WC metadata and internal-only events/collections) out of igniteui-angular grid sources and into igniteui-angular-elements, by introducing Elements wrapper components and updating the Elements analyzer/registration to target them.

Changes:

  • Removes Elements-only outputs/metadata from Angular grid base sources (e.g., columnsAutogenerated, childrenResolved, action strip collection tags) and adjusts internals (ContentChildrenContentChild for action strip).
  • Introduces Elements wrapper components for Grid, TreeGrid, HierarchicalGrid, and RowIsland that re-add Elements-only outputs/collections and re-emit columnsAutogenerated.
  • Updates Elements registration/analyzer configuration to use the new wrapper components, plus minor build config updates (angular.json bundle budget; package-lock.json metadata).

Reviewed changes

Copilot reviewed 22 out of 23 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
projects/igniteui-angular/paginator/src/paginator/paginator.component.ts Updates @igxParent metadata to reference Elements grid wrappers.
projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts Removes Blazor dependency tags; adds blazorAlternateName/indirect-render metadata.
projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts Removes Elements-only template/content/query/event members from Angular RowIsland.
projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts Removes Elements-only action strip query override; updates Blazor metadata.
projects/igniteui-angular/grids/grid/src/grid.component.ts Removes Blazor dependency tags; adds blazorAlternateName/indirect-render metadata.
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts Removes Elements-only outputs (columnsAutogenerated, childrenResolved), changes action strip query to ContentChild, removes columnsAutogenerated emit.
projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts Updates @igxParent metadata to reference Elements grid wrappers.
projects/igniteui-angular/grids/core/src/common/events.ts Removes IColumnsAutoGeneratedEventArgs from Angular grids core (moved to Elements).
projects/igniteui-angular/grids/core/src/columns/column.component.ts Updates @igxParent metadata to reference Elements grid wrappers.
projects/igniteui-angular/grids/core/src/columns/column-layout.component.ts Updates @igxParent metadata to reference Elements grid wrappers.
projects/igniteui-angular/grids/core/src/columns/column-group.component.ts Updates @igxParent metadata to reference Elements grid wrappers.
projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts Updates @igxParent metadata to reference Elements grid wrappers.
projects/igniteui-angular-elements/src/lib/state.component.ts Updates @igxParent metadata to reference Elements grid wrappers.
projects/igniteui-angular-elements/src/lib/grids/tree-grid.component.ts Adds Elements TreeGrid wrapper component, reintroducing Elements-only outputs/collections.
projects/igniteui-angular-elements/src/lib/grids/row-island.component.ts Adds Elements RowIsland wrapper component, reintroducing Elements-only members and childDataKey.
projects/igniteui-angular-elements/src/lib/grids/hierarchical-grid.component.ts Adds Elements HierarchicalGrid wrapper component, reintroducing Elements-only outputs/collections.
projects/igniteui-angular-elements/src/lib/grids/grid.component.ts Adds Elements Grid wrapper component, reintroducing Elements-only outputs/collections.
projects/igniteui-angular-elements/src/lib/grids/events.ts Adds Elements-only IColumnsAutoGeneratedEventArgs definition.
projects/igniteui-angular-elements/src/app/components.ts Registers custom elements using Elements wrapper components instead of Angular grid components.
projects/igniteui-angular-elements/src/analyzer/elements.config.ts Updates analyzer registration to prefer Elements wrapper components and adjusts content queries.
projects/igniteui-angular-elements/src/analyzer/config.template.ts Updates analyzer template to use Elements wrapper components.
package-lock.json Updates lockfile metadata (dev/optional/peer flags).
angular.json Increases bundle budget maximum error threshold.

/**
* State component allows saving and restoring the state of the grid features.
* @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, *
* @igxParent IgxGridElementsComponent, IgxTreeGridElementsComponent, IgxHierarchicalGridElementsComponent, IgxPivotGridComponent, *
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Oh, well that's awkward to say the least. This goes directly into the public API docs for Ignite UI for Angular, so not really great to list the elements class names.

Two options:

  1. Make the parent resolve more flexible so old IgxGridComponent also recognizes the extended IgxGridElementsComponent
  2. OR, bit a odd idea, but might work: Re-define IgxGridComponent as the extended class in Elements and simply alias the main component as something else:
    import { IgxGridComponent as IgxGrid } from 'igniteui-angular/grids/grid/src/grid.component';
    @Component({
        selector: 'igx-grid',
        templateUrl: '../../../../igniteui-angular/grids/grid/src/grid.component.html'
    })
    export class IgxGridComponent extends IgxGrid {

Honestly, the second option would mean we touch almost nothing in the main source and the config for elements too, merely change the import path for IgxGridComponent to come from elements instead.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Why would this go in the public api docs for Angular? It's under the projects/igniteui-angular-elements and the components should only ship with wc.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Seems to work with the aliases. Added the change.

],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class IgxHierarchicalGridElementsComponent extends IgxHierarchicalGridComponent {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

One last concern I have is with the HGrid - I know we had functionality so toolbars and such as templates can discover their actual igx-hierarchical-grid parent that's not an Element. The selector is the same but the instance prototype won't be.
Not sure if the original Angular class missing from the elements config will cause issues with that functionality (must check carefully there)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Seems to work for toolbar, at least in the dev sample:

image image

Also for paginator:

image image

MayaKirova and others added 2 commits April 2, 2026 17:57
Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Elements] Move all elements specific members from the angular grids into angular-element's source.

8 participants