refactor(igx-ts): migrate templates to Angular signals and inject() function by Copilot · Pull Request #1586 · IgniteUI/igniteui-cli

Copilot · 2026-03-31T22:18:25Z

End-to-End Template Test Results

Test Setup

Created a fresh igx-ts project using ig new TestProject --framework=angular --type=igx-ts --theme=default
Added all 45 available component templates using ig add

Template Scaffolding: All 45/45 templates scaffolded successfully ✅

accordion, autocomplete, enhanced-autocomplete, bullet-graph, calendar, carousel, category-chart, chip, combo, date-picker, dialog, dock-manager, dropdown, financial-chart, grid, grid-batch-editing, custom-grid, grid-summaries, grid-multi-column-headers, hierarchical-grid, hierarchical-grid-batch-editing, hierarchical-grid-custom, hierarchical-grid-summaries, input-group, linear-gauge, list, geographic-map, pivot-grid, radial-gauge, select, select-groups, select-in-form, stepper, bottom-nav, tabs, time-picker, tooltip, tree, custom-tree-grid, awesome-grid, crm-grid, fintech-grid, fintech-tree-grid, login, weather-forecast

Angular Build: ✅ Application bundle generation complete (53s)

Zero TypeScript errors
Zero Angular compiler errors
Only pre-existing warnings (Sass deprecations, ESM module warnings from third-party deps)

Existing Test Suite: ✅ All 379 specs pass

Same 9 pre-existing failures (unrelated ./output/ directory issues)
No new test failures

Bug Fixes Applied During Testing

awesome-grid: Fixed this.grid1 → this.grid1() as any in createAbsoluteOverlaySettings() — signal was not unwrapped
fintech-grid: Fixed null safety for groupsRecords optional chain and data property access with non-null assertions where values are guarded by if checks

Agent-Logs-Url: https://github.com/IgniteUI/igniteui-cli/sessions/f864bfd5-94a9-4116-b42a-29df85870377 Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>

…d inject() function Agent-Logs-Url: https://github.com/IgniteUI/igniteui-cli/sessions/f864bfd5-94a9-4116-b42a-29df85870377 Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>

…angular-signals

coveralls · 2026-04-02T09:34:19Z

coverage: 86.103%. remained the same — copilot/migrate-to-angular-signals into master

… changelog Agent-Logs-Url: https://github.com/IgniteUI/igniteui-cli/sessions/0ff71a55-9cc5-4767-87e0-71987f455c78 Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>

Copilot

Pull request overview

Migrates igx-ts Angular templates to newer Angular patterns by adopting signal-based view queries, the inject() function for DI, and signal-based outputs.

Changes:

Replaced @ViewChild queries with viewChild() / viewChild.required() and updated call sites to dereference signals via ().
Replaced @Output + EventEmitter with output().
Replaced constructor parameter injection with inject() across templates and services; updated CHANGELOG entry.

Reviewed changes

Copilot reviewed 35 out of 35 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/igx-templates/igx-ts/tree/default/files/src/app/path/filePrefix.ts	Switches service DI to `inject()` in the tree template.
packages/igx-templates/igx-ts/select/select-in-form/files/src/app/path/filePrefix.ts	Migrates `@ViewChild` to `viewChild.required()` and updates toast usage.
packages/igx-templates/igx-ts/radial-gauge/default/files/src/app/path/filePrefix.ts	Migrates radial gauge `@ViewChild` to signal query and unwraps usages.
packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.ts	Migrates nav drawer query to `viewChild.required()` and router DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/user-store.ts	Migrates service DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/local-storage.ts	Migrates `PLATFORM_ID` injection to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/jwt.interceptor.ts	Migrates interceptor DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/fake-backend.ts	Migrates backend interceptor DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/external-auth.ts	Migrates multi-service DI to `inject()` fields.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/authentication.ts	Migrates HttpClient DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/register/register.ts	Migrates outputs to `output()` and DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/redirect/redirect.ts	Migrates route/router/auth DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/profile/profile.ts	Migrates UserStore DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/login.ts	Migrates outputs to `output()` and DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.ts	Migrates dialog `@ViewChild` to `viewChild.required()` and unwraps usage.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.spec.ts	Updates test component outputs to `output()` and unwraps view query usage in assertions/spies.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.ts	Migrates view queries to `viewChild.required()` and DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/auth.guard.ts	Migrates guard DI to `inject()`.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.ts	Migrates nav drawer query to `viewChild.required()` and router DI to `inject()`.
packages/igx-templates/igx-ts/map/default/files/src/app/path/filePrefix.ts	Migrates map `@ViewChild` to signal query and unwraps usage.
packages/igx-templates/igx-ts/linear-gauge/default/files/src/app/path/filePrefix.ts	Migrates linear gauge `@ViewChild` to signal query and unwraps usages.
packages/igx-templates/igx-ts/input-group/default/files/src/app/path/filePrefix.ts	Migrates FormBuilder DI to `inject()`.
packages/igx-templates/igx-ts/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/path/filePrefix.ts	Migrates multiple `@ViewChild` queries to signal queries and unwraps usages.
packages/igx-templates/igx-ts/grid/grid-summaries/files/src/app/path/filePrefix.ts	Migrates grid `@ViewChild` to signal query and unwraps usage.
packages/igx-templates/igx-ts/grid/grid-batch-editing/files/src/app/path/filePrefix.ts	Migrates grid/dialog queries to signal queries and unwraps usage.
packages/igx-templates/igx-ts/custom-templates/weather-forecast/files/src/app/path/filePrefix.ts	Migrates panel `@ViewChild` to `viewChild.required()` and unwraps usage.
packages/igx-templates/igx-ts/custom-templates/login/files/src/app/path/filePrefix.ts	Migrates FormBuilder DI to `inject()` and initializes forms via injected builder.
packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/path/filePrefix.ts	Migrates multiple view queries to `viewChild.required()` and DI to `inject()`.
packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/path/filePrefix.ts	Migrates multiple view queries to `viewChild.required()` and DI to `inject()`, plus null-safety adjustments.
packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/path/filePrefix.ts	Migrates main grid query to `viewChild.required()` and exporter DI to `inject()`.
packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/path/filePrefix.ts	Migrates view queries to signal queries and overlay DI to `inject()`.
packages/igx-templates/igx-ts/chip/default/files/src/app/path/filePrefix.ts	Migrates view queries to signal queries and CDR DI to `inject()`.
packages/igx-templates/igx-ts/bullet-graph/default/files/src/app/path/filePrefix.ts	Migrates bullet graph `@ViewChild` to signal query and unwraps usages.
packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/path/filePrefix.ts	Migrates toast `@ViewChild` to `viewChild.required()` and unwraps usage.
CHANGELOG.md	Adds a changelog entry describing the signals/inject migration.

Comments suppressed due to low confidence (2)

packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/path/filePrefix.ts:156

ngOnInit subscribes to this.volumeSlider().valueChange, but volumeSlider is a viewChild.required signal. Set up this subscription only after the view query resolves (e.g., in ngAfterViewInit/afterNextRender). If you move it, ensure ngOnDestroy doesn’t unsubscribe() an uninitialized subscription.

    this.volumeChanged = this.volumeSlider().valueChange.pipe(debounce(() => timer(200)));
    this.volumeChanged.subscribe(
      () => {
        this.localData.getData(this.volume);
      },

packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/path/filePrefix.ts:170

ngOnInit also dereferences this.volumeSlider() to subscribe to valueChange. Since volumeSlider is a viewChild.required signal, set up this subscription only after the view query resolves (e.g., in ngAfterViewInit/afterNextRender). If you move it, ensure ngOnDestroy doesn’t unsubscribe an uninitialized subscription.

    this.volumeChanged = this.volumeSlider().valueChange.pipe(debounce(() => timer(200)));
    this.volumeChanged.subscribe(
      () => {
        this.localData.getData(this.volume);
      },

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-14T15:37:54Z

+    if (this.grid1().groupsRecords[0].groups && this.grid1().groupsRecords[0]?.groups?.[0]?.groups) {
+      const recordsToBeSelected = this.grid1().selectionService.getRowIDs(this.grid1().groupsRecords[0].groups![0].groups![0].records);


The groupsRecords guard still assumes groupsRecords[0] exists (this.grid1().groupsRecords[0].groups ...). If the grouped records array is empty (e.g., before grouping completes), this will throw. Add a length/optional-chain check before indexing and remove the non-null assertions by guarding the nested structure.

Suggested change

if (this.grid1().groupsRecords[0].groups && this.grid1().groupsRecords[0]?.groups?.[0]?.groups) {

const recordsToBeSelected = this.grid1().selectionService.getRowIDs(this.grid1().groupsRecords[0].groups![0].groups![0].records);

const groupsRecords = this.grid1().groupsRecords;

const records = groupsRecords.length > 0 ? groupsRecords[0]?.groups?.[0]?.groups?.[0]?.records : undefined;

if (records) {

const recordsToBeSelected = this.grid1().selectionService.getRowIDs(records);

Copilot · 2026-04-14T15:37:55Z

+  public toggleRefHiding = viewChild<IgxToggleDirective>('toggleRefHiding');
+  public toggleRefPinning = viewChild<IgxToggleDirective>('toggleRefPinning');

-  @ViewChild('hidingButton') public hidingButton!: ElementRef;
-  @ViewChild('pinningButton') public pinningButton!: ElementRef;
+  public hidingButton = viewChild<ElementRef>('hidingButton');
+  public pinningButton = viewChild<ElementRef>('pinningButton');


toggleRefHiding/toggleRefPinning and the button ElementRefs are declared as optional (viewChild(...)) but later used with non-null assertions. If these queries are required for the template, prefer viewChild.required(...) so the types match actual usage and you can remove the !; otherwise add guards before dereferencing.

I'll delete those in a separate PR as they are not used, but out of scope for the current migration.

Copilot · 2026-04-14T15:37:56Z

  public ngOnInit(): void {
    this.transactionsData = this.transactions.getAggregatedChanges(true);
-    this.grid.rendered$.subscribe(() => {
+    this.grid().rendered$.subscribe(() => {
      this.transactions.onStateUpdate?.subscribe(() => {


viewChild.required(...) queries are not guaranteed to be resolved during ngOnInit. Calling this.grid() (and this.transactions, which depends on it) in ngOnInit can throw at runtime. Move the logic that touches the grid (including the rendered$ subscription and getAggregatedChanges(...) call) to ngAfterViewInit (or afterNextRender) so the view query is definitely available before dereferencing the signal.

-.-
Sure it is, it's the replacement of { static: true } which was:

By setting static: true, you guarantee to Angular that the target of this query is always present and is not conditionally rendered. This makes the result available earlier, in the ngOnInit lifecycle method.

https://angular.dev/guide/components/queries#static-queries

And it's always defined by:

If a required query does not find a matching result, Angular reports an error. Because this guarantees that a result is available, required queries do not automatically include undefined in the signal's value type.

https://angular.dev/guide/components/queries#required-queries

Heck, the compiler even complains if this is used earlier (say in constructor):

constructor() { console.log('ctor', this.saveButton()) }

causes

✘ [ERROR] NG8118: saveButton is a required viewChild and does not have a value in this context. [plugin angular-compiler]

So this passing build is also a solid sign it will have a value alright.

Copilot AI and others added 2 commits March 31, 2026 21:58

Plan: Migrate igx-ts templates to Angular signals and inject()

3711976

Agent-Logs-Url: https://github.com/IgniteUI/igniteui-cli/sessions/f864bfd5-94a9-4116-b42a-29df85870377 Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>

Migrate igx-ts templates to use Angular signals (viewChild/output) an…

bd95fd5

…d inject() function Agent-Logs-Url: https://github.com/IgniteUI/igniteui-cli/sessions/f864bfd5-94a9-4116-b42a-29df85870377 Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>

Copilot AI assigned Copilot and damyanpetev Mar 31, 2026

Copilot created this pull request from a session on behalf of damyanpetev March 31, 2026 22:19 View session

Copilot finished work on behalf of damyanpetev March 31, 2026 22:19

Copilot AI requested a review from damyanpetev March 31, 2026 22:19

damyanpetev added 2 commits April 2, 2026 12:29

Merge remote-tracking branch 'origin/master' into copilot/migrate-to-…

8ae3ae7

…angular-signals

chore: revert lock file changes

45e91a1

damyanpetev force-pushed the copilot/migrate-to-angular-signals branch from 1978764 to 45e91a1 Compare April 2, 2026 09:39

Merge branch 'master' into copilot/migrate-to-angular-signals

6fb4e68

damyanpetev added the angular-standalone label Apr 2, 2026

Merge branch 'master' into copilot/migrate-to-angular-signals

1040ead

Copilot started work on behalf of damyanpetev April 3, 2026 08:38 View session

fix: resolve TypeScript build errors in migrated templates and update…

48a4100

… changelog Agent-Logs-Url: https://github.com/IgniteUI/igniteui-cli/sessions/0ff71a55-9cc5-4767-87e0-71987f455c78 Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>

Copilot finished work on behalf of damyanpetev April 3, 2026 09:00

Merge branch 'master' into copilot/migrate-to-angular-signals

21fffa4

damyanpetev marked this pull request as ready for review April 14, 2026 15:30

Copilot AI review requested due to automatic review settings April 14, 2026 15:30

damyanpetev added the squash-merge label Apr 14, 2026

damyanpetev changed the title ~~Migrate igx-ts templates to Angular signals and inject() function~~ reafactor(igx-ts): migrate templates to Angular signals and inject() function Apr 14, 2026

Copilot started reviewing on behalf of damyanpetev April 14, 2026 15:30 View session

damyanpetev changed the title ~~reafactor(igx-ts): migrate templates to Angular signals and inject() function~~ refactor(igx-ts): migrate templates to Angular signals and inject() function Apr 14, 2026

Copilot AI reviewed Apr 14, 2026

View reviewed changes

damyanpetev requested a review from ChronosSF April 15, 2026 16:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(igx-ts): migrate templates to Angular signals and inject() function#1586

refactor(igx-ts): migrate templates to Angular signals and inject() function#1586
Copilot wants to merge 8 commits intomasterfrom
copilot/migrate-to-angular-signals

Copilot AI commented Mar 31, 2026 •

edited

Loading

Uh oh!

coveralls commented Apr 2, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

damyanpetev Apr 15, 2026

Uh oh!

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

damyanpetev Apr 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

		if (this.grid1().groupsRecords[0].groups && this.grid1().groupsRecords[0]?.groups?.[0]?.groups) {
		const recordsToBeSelected = this.grid1().selectionService.getRowIDs(this.grid1().groupsRecords[0].groups![0].groups![0].records);

-    if (this.grid1().groupsRecords[0].groups && this.grid1().groupsRecords[0]?.groups?.[0]?.groups) {
-      const recordsToBeSelected = this.grid1().selectionService.getRowIDs(this.grid1().groupsRecords[0].groups![0].groups![0].records);
+    const groupsRecords = this.grid1().groupsRecords;
+    const records = groupsRecords.length > 0 ? groupsRecords[0]?.groups?.[0]?.groups?.[0]?.records : undefined;
+    if (records) {
+      const recordsToBeSelected = this.grid1().selectionService.getRowIDs(records);

Conversation

Copilot AI commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

End-to-End Template Test Results

Test Setup

Template Scaffolding: All 45/45 templates scaffolded successfully ✅

Angular Build: ✅ Application bundle generation complete (53s)

Existing Test Suite: ✅ All 379 specs pass

Bug Fixes Applied During Testing

Uh oh!

coveralls commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

damyanpetev Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

damyanpetev Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Copilot AI commented Mar 31, 2026 •

edited

Loading

coveralls commented Apr 2, 2026 •

edited

Loading