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

Angular Material 15 → Angular Material 160 of 4 done · 1 hop
1

Angular Material 15 → Angular Material 16

(4 steps)
Pre-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.

Tooling / Requirements

Angular Material 16 requires the same toolchain as Angular 16: Node 16.14+/18.10+ and TypeScript 4.9–5.1.

Update Command

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

ng update @angular/core@16 @angular/cli@16 @angular/material@16
Migration / Adoption

Replace @angular/material/legacy-* imports with the new MDC components one component at a time, fixing styles as you go. Use the density and typography mixins (mat.<component>-density) to tune the MDC look. Legacy components are still available this version but go away in v17.

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 15 to Angular Material 16

This plan covers the full path from Angular Material 15 to Angular Material 16 — 1 version hop and 4 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

  1. Angular Material 15 → Angular Material 16 — 4 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 15 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.