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;