Angular Material Upgrade Planner

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.

Angular Material 9 requires the same toolchain as Angular 9: Node 10.13+ and TypeScript 3.6–3.8.

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

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

Material moves onto Ivy with Angular 9 and introduces component test harnesses (@angular/cdk/testing) for more robust component tests. Mostly dependency and minor API changes this hop.

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.

Angular Material 10 requires the same toolchain as Angular 10: Node 12+ and TypeScript 3.9.

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

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

Material 10 adds the mat-date-range-input / mat-date-range-picker and refreshes several styles. Material tracks Angular core; review any deprecation warnings the update prints.

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.

Angular Material 11 requires the same toolchain as Angular 11: TypeScript 4.0.

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

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

Mostly dependency bumps and small fixes for Material this hop. Run the update schematics and review the changelog for any component you customize heavily.

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.

Angular Material 12 requires the same toolchain as Angular 12: Node 12.14+ and TypeScript 4.2.

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

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

Material 12 adopts the Sass module system. Replace @import "~@angular/material/theming" with @use "@angular/material" as mat; and use mat.define-light-theme, mat.core, and mat.all-component-themes. The update includes a theming migration schematic.

@use '@angular/material' as mat;

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.

Angular Material 13 requires the same toolchain as Angular 13: Node 12.20+/14.15+/16.10+ and TypeScript 4.4.

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

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

Material 13 tightens the public theming API (use mat.* functions rather than deep imports) and updates the Angular Package Format. Stop importing from internal paths if you were.

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.

Angular Material 14 requires the same toolchain as Angular 14: Node 14.15+/16.10+ and TypeScript 4.6–4.8.

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

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

The MDC-based components are available under @angular/material-experimental in v14. Trying them now makes the mandatory v15 MDC migration far smoother. mat-selection-list items require explicit values.