Update to Angular 22 by GoodDayForSurf · Pull Request #495 · DevExpress/devextreme-ui-template-gallery

GoodDayForSurf · 2026-06-04T22:17:12Z

No description provided.

Copilot

Pull request overview

Updates the monorepo’s Angular package set to Angular 22 and migrates a large portion of the Angular app code to newer Angular patterns (signals/models and built-in control flow), while also refreshing dependencies across Vue/React/testing packages.

Changes:

Bump Angular toolchain and core packages to ^22.0.0 via pnpm catalogs; update Angular build/serve/test builders to the newer @angular/build:* targets.
Migrate Angular components/templates from *ngIf/*ngFor/ngSwitch to @if/@for/@switch, and refactor component state to signal()/model()/computed().
Update various workspace dependencies (Vue/React/testing/data packages) to newer versions.

Reviewed changes

Copilot reviewed 54 out of 55 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
pnpm-workspace.yaml	Updates Angular 22 catalog entries and workspace overrides.
package.json	Refreshes root tooling/dev dependency versions.
packages/vue/package.json	Updates Vue app dependencies/devDependencies.
packages/react/package.json	Updates React app dependencies/devDependencies.
packages/testing/package.json	Updates test tooling dependencies.
packages/dx-template-gallery-data/package.json	Updates shared data package dependencies (e.g., axios/luxon).
packages/angular/package.json	Updates Angular package deps/devDeps (incl. devextreme-angular and lint deps).
packages/angular/tsconfig.json	Adjusts TS compiler options for the Angular package.
packages/angular/angular.json	Switches Angular builders to `@angular/build:*` and updates build options format.
packages/angular/karma.conf.js	Updates Karma config (notably plugin list).
packages/angular/src/main.ts	Updates Angular bootstrap providers (zone + HttpClient providers).
packages/angular/src/app/pages/user-profile/user-profile.component.ts	Refactors page state to signals/models and updates related logic.
packages/angular/src/app/pages/user-profile/user-profile.component.html	Updates bindings for signals and adopts `@if` syntax.
packages/angular/src/app/pages/planning-task-list/planning-task-list.component.html	Migrates conditional rendering/switching to `@if/@switch`.
packages/angular/src/app/pages/planning-task-details/planning-task-details.component.ts	Refactors task state to signals/computed.
packages/angular/src/app/pages/planning-task-details/planning-task-details.component.html	Updates bindings to signal-call syntax.
packages/angular/src/app/pages/planning-scheduler/planning-scheduler.component.html	Migrates tooltip conditional rendering to `@if`.
packages/angular/src/app/pages/crm-contact-list/crm-contact-list.component.ts	Makes grid dimension update safer with optional chaining.
packages/angular/src/app/pages/crm-contact-details/crm-contact-details.component.ts	Refactors contact details state to signals and simplifies forkJoin usage.
packages/angular/src/app/pages/crm-contact-details/crm-contact-details.component.html	Updates bindings to signal-call syntax.
packages/angular/src/app/pages/analytics-sales-analysis/analytics-sales-analysis.component.ts	Refactors analytics state to signals/models and modernizes data loading.
packages/angular/src/app/pages/analytics-sales-analysis/analytics-sales-analysis.component.html	Updates bindings to signal-call syntax.
packages/angular/src/app/pages/analytics-geography/analytics-geography.component.ts	Refactors analytics geography state to signals and simplifies lifecycle.
packages/angular/src/app/pages/analytics-geography/analytics-geography.component.html	Updates bindings to signal-call syntax.
packages/angular/src/app/pages/analytics-dashboard/analytics-dashboard.component.ts	Refactors dashboard state to signals and changes layout computation.
packages/angular/src/app/pages/analytics-dashboard/analytics-dashboard.component.html	Updates bindings and uses `usesSplitterLayout()` in `@if`.
packages/angular/src/app/components/utils/toolbar-analytics/toolbar-analytics.component.html	Migrates `*ngIf` to `@if`.
packages/angular/src/app/components/utils/right-side-panel/right-side-panel.component.html	Migrates `*ngIf` to `@if`.
packages/angular/src/app/components/utils/left-side-panel/left-side-panel.component.html	Migrates `*ngIf` to `@if`.
packages/angular/src/app/components/utils/form-textbox/form-textbox.component.html	Migrates `*ngIf` to `@if` for optional icon button.
packages/angular/src/app/components/utils/form-photo/form-photo.component.html	Migrates `*ngIf` to `@if` for editable UI elements.
packages/angular/src/app/components/utils/revenue-snapshot-card/revenue-snapshot-card.component.ts	Adjusts input type import/type for snapshot card.
packages/angular/src/app/components/library/user-panel/user-panel.component.html	Migrates `*ngIf` branches to `@if`.
packages/angular/src/app/components/library/user-menu-section/user-menu-section.component.html	Migrates `*ngIf` to `@if`.
packages/angular/src/app/components/library/ticker-card/ticker-card.component.html	Migrates `*ngIf` to `@if`.
packages/angular/src/app/components/library/task-list-kanban/task-list-kanban.component.html	Migrates lists to `@for` with tracking.
packages/angular/src/app/components/library/task-form/task-form.component.html	Migrates `*ngIf` to `@if` blocks.
packages/angular/src/app/components/library/status-indicator/status-indicator.component.ts	Migrates inline template `*ngIf` to `@if`.
packages/angular/src/app/components/library/scheduler-tooltip/scheduler-tooltip.component.html	Migrates `*ngIf` to `@if`.
packages/angular/src/app/components/library/reset-password-form/reset-password-form.component.html	Migrates `*ngIf/else` to `@if/@else`.
packages/angular/src/app/components/library/profile-card/profile-card.component.html	Migrates `ngFor/ngIf/ngSwitch` to `@for/@if/@switch`.
packages/angular/src/app/components/library/login-form/login-form.component.html	Migrates `*ngIf/else` to `@if/@else`.
packages/angular/src/app/components/library/create-account-form/create-account-form.component.html	Migrates `*ngIf/else` to `@if/@else`.
packages/angular/src/app/components/library/contact-panel/contact-panel.component.ts	Refactors inputs/outputs and state management to signals/model/input()/output().
packages/angular/src/app/components/library/contact-panel/contact-panel.component.html	Updates bindings to signal-call syntax and migrates loops/ifs to `@for/@if`.
packages/angular/src/app/components/library/contact-form/contact-form.component.html	Migrates `*ngIf` to `@if`.
packages/angular/src/app/components/library/change-password-form/change-password-form.component.html	Migrates `*ngIf/else` to `@if/@else`.
packages/angular/src/app/components/library/card-tasks/card-tasks.component.html	Migrates `*ngIf` to `@if`.
packages/angular/src/app/components/library/card-opportunities/card-opportunities.component.html	Migrates `ngIf/ngFor` to `@if/@for`.
packages/angular/src/app/components/library/card-notes/card-notes.component.html	Migrates `*ngFor` to `@for`.
packages/angular/src/app/components/library/card-messages/card-messages.component.html	Migrates `*ngFor` to `@for`.
packages/angular/src/app/components/library/card-analytics/card-analytics.component.html	Migrates `*ngIf` to `@if`.
packages/angular/src/app/components/library/card-activities/card-activities.component.html	Migrates `*ngIf` to `@if`.
packages/angular/src/app/components/library/app-header/app-header.component.html	Migrates `*ngIf` to `@if` for conditional header items.

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

Copilot

Pull request overview

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

Copilot

Pull request overview

Copilot reviewed 119 out of 120 changed files in this pull request and generated 3 comments.

…template-gallery into master_update_ng22 # Conflicts: # packages/react/package.json # pnpm-lock.yaml

lint does not allow ngIf anymore

…template-gallery into master_update_ng22

GoodDayForSurf added 5 commits June 4, 2026 18:18

Update to Angular 22

8c244b9

use signals in Analytic Pages

9e44d4f

use signals in Profile Page

d0bf67b

clean overrides

6bfc4cb

replace ngIf and ngFor to modern syntax @if and @for

23f7a4f

GoodDayForSurf self-assigned this Jun 4, 2026

GoodDayForSurf requested a review from Copilot June 4, 2026 22:17

Copilot started reviewing on behalf of GoodDayForSurf June 4, 2026 22:17 View session

Copilot AI reviewed Jun 4, 2026

View reviewed changes

fix TS for 6.0 requirements in angular app

d5ced64

GoodDayForSurf closed this Jun 4, 2026

GoodDayForSurf reopened this Jun 4, 2026

GoodDayForSurf added 2 commits June 5, 2026 11:07

fix TS for 6.0 requirements in angular app

69e92b4

fix contact-details

5ccd9db

GoodDayForSurf force-pushed the master_update_ng22 branch from 8ec817d to 5ccd9db Compare June 5, 2026 10:37

GoodDayForSurf added 4 commits June 5, 2026 13:58

fix TS

ac3f474

fix testing for angular

e80fae2

fix user-panel in toolbar for angular

42a2dcc

fix devextreme-angular in deps

38ad68a

GoodDayForSurf requested a review from Copilot June 5, 2026 13:38

Copilot started reviewing on behalf of GoodDayForSurf June 5, 2026 13:38 View session

Copilot AI reviewed Jun 5, 2026

View reviewed changes

Comment thread packages/angular/src/app/pages/planning-scheduler/planning-scheduler.component.ts

Comment thread packages/angular/tsconfig.json

Comment thread packages/angular/karma.conf.js

Comment thread packages/angular/package.json Outdated

Comment thread package.json

fix user-panel in toolbar for angular

919b439

GoodDayForSurf requested a review from Copilot June 5, 2026 14:08

Copilot started reviewing on behalf of GoodDayForSurf June 5, 2026 14:09 View session

Copilot AI reviewed Jun 5, 2026

View reviewed changes

Comment thread packages/angular/tsconfig.json

Comment thread packages/angular/src/app/pages/planning-scheduler/planning-scheduler.component.ts

Comment thread packages/angular/src/app/pages/user-profile/user-profile.component.ts

GoodDayForSurf added 4 commits June 5, 2026 17:07

use signals on auth pages

c2bc75e

fix styling mode for sign-in buttons in angular

9fd58c6

fix toolbar buttons in angular

521e83e

fix toolbar style in angular

18f8bb7

GoodDayForSurf added 2 commits June 9, 2026 11:19

fix screen modes in tests

8ad664a

fix analytic-sales test

a58efee

GoodDayForSurf force-pushed the master_update_ng22 branch from e409172 to a58efee Compare June 9, 2026 11:54

GoodDayForSurf added 8 commits June 9, 2026 13:59

fix analytic-sales test

a026977

Merge branch 'master' of https://github.com/DevExpress/devextreme-ui-…

e45886e

…template-gallery into master_update_ng22 # Conflicts: # packages/react/package.json # pnpm-lock.yaml

update lock

d2ff2c4

update test config

bf68347

remove unused screenshots

dad5a73

tune analytic-sales test

2621929

tune analytic-sales test

b85eb09

fix review notes

f3cf9c2

GoodDayForSurf marked this pull request as ready for review June 9, 2026 14:09

GoodDayForSurf requested a review from a team June 9, 2026 14:11

GoodDayForSurf added 2 commits June 9, 2026 16:13

fix review notes

0215696

fix formatting

b6e53ab

dxvladislavvolkov reviewed Jun 10, 2026

View reviewed changes

Comment thread packages/angular/src/app/components/library/card-messages/card-messages.component.ts

Comment thread ...ages/angular/src/app/components/library/reset-password-form/reset-password-form.component.ts

GoodDayForSurf added 6 commits June 10, 2026 11:01

revert moving to @if and @for

2186663

fixes after revert

3d53fa5

revert of reverting

65da618

lint does not allow ngIf anymore

revert functionality

c334021

Merge branch 'master' of https://github.com/DevExpress/devextreme-ui-…

0233961

…template-gallery into master_update_ng22

fixes after merge

362e3fa

GoodDayForSurf requested a review from dxvladislavvolkov June 10, 2026 18:13

dxvladislavvolkov reviewed Jun 11, 2026

View reviewed changes

Comment thread packages/angular/src/app/components/utils/form-photo/form-photo.component.html

fix formatting

60a8874

dxvladislavvolkov previously approved these changes Jun 12, 2026

View reviewed changes

remove update deps for react for consistency

aae9c31

GoodDayForSurf dismissed dxvladislavvolkov’s stale review via aae9c31 June 12, 2026 12:12

dxvladislavvolkov approved these changes Jun 12, 2026

View reviewed changes

GoodDayForSurf merged commit dee996f into DevExpress:master Jun 12, 2026
69 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update to Angular 22#495

Update to Angular 22#495
GoodDayForSurf merged 40 commits into
DevExpress:masterfrom
GoodDayForSurf:master_update_ng22

GoodDayForSurf commented Jun 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

GoodDayForSurf commented Jun 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants