How many steps does the Angular Material 14 to Angular Material 15 upgrade involve?

This path spans 1 version hop with 7 planned steps across pre-flight, requirements, ng update, breaking changes, deprecations, and migrations.

Wasim's Site

Angular Material Upgrade Planner

Pick a source and target Angular Material version (8–22) for an ordered upgrade plan — MDC migration, legacy removal, Material 3 theming, and ng update commands.

Choose your upgrade path

From (current version)

To (target version)

Angular Material 14 → Angular Material 150 of 7 done · 1 hop

Angular Material 14 → Angular Material 15

(7 steps)

Upgrade Material together with Angular core, on a branchPre-flight

Angular Material’s major version must match the Angular core major version. Update them together in the same hop, upgrade one major at a time on a branch, and run the app/tests after each hop. Commit a clean tree first.

Match Angular 15 requirementsTooling / Requirements

Angular Material 15 requires the same toolchain as Angular 15: Node 14.20+/16.13+/18.10+ and TypeScript 4.8–4.9.

Run ng update to Angular Material 15Update Command

Update Material alongside the Angular core and CLI so the Material migration schematics for this version run.

ng update @angular/core@15 @angular/cli@15 @angular/material@15

Every component is rebuilt on MDCBreaking Change

Material 15 refactors all components onto Material Design Components (MDC). DOM structure and CSS class names change, so custom component styles can break. This is the single biggest Material upgrade — budget time for visual QA.

Form field and prefix/suffix changesBreaking Change

floatLabel="never" is dropped (it only existed on the old form-field appearance). Use matTextPrefix/matTextSuffix for baseline-aligned text and matIconPrefix/matIconSuffix for centered icons. Expect density and typography differences.

Legacy components are deprecated (removed in v17)Deprecation / Removal

The @angular/material/legacy-* packages are a temporary bridge — they are deprecated in v15 and deleted in v17, so plan your migration off them before then.

ng update moves you to legacy imports firstMigration / Adoption

The update schematic rewrites imports to @angular/material/legacy-* so the app runs on v15 immediately with minimal changes. Then migrate component-by-component to the new (non-legacy) MDC components.

ng update @angular/material@15

Tip: Always upgrade Angular Material together with Angular core (their majors must match) and one major at a time. The hardest hops are the MDC rewrite at v15 and the Material 3 theming switch at v18 — budget extra time for visual QA there. This is a representative checklist; confirm specifics against the official Angular Material guides for your versions.

Upgrading Angular Material 14 to Angular Material 15

This plan covers the full path from Angular Material 14 to Angular Material 15 — 1 version hop and 7 steps in total. Upgrade Angular Material together with Angular core, one major at a time, running ng update for each hop so the Material migration schematics apply. Commit and run thorough visual QA between hops.

Hops in this path

Angular Material 14 → Angular Material 15 — 7 steps

Before you start

Upgrade on a branch and keep Angular Material's major in lockstep with Angular core.
Get on the latest minor/patch of Angular Material 14 before the first hop.
Plan extra time for visual QA on the MDC (v15) and Material 3 theming (v18) hops if they fall in this range.