Angular Material Developer Guidelines

Pairs with angular-developer , that skill provides Angular fundamentals (signals, DI, routing, forms, SSR, accessibility). This skill focuses on Angular Material specifics. Install both for the best experience.

Compatibility

• Tracks: @angular/material@22.1.1 (Angular v22), paired with @angular/cdk@22.1.1 (Material peers an exact cdk version, keep the two pinned together). The v21-aligned line remains at 21.2.x for legacy projects.
• Animations peer dropped (v21.2+): Material no longer declares an @angular/animations peer dependency and animates via native CSS. ng add @angular/material on 21.2+/22 does not wire provideAnimationsAsync() and does not require @angular/animations, do not add either to a fresh Material 22 app. (Earlier v21.x and all v18-20 apps still need the provider; see setup.md.)
• Works for: Material v19 → v22 projects (M3 theming system landed in v19; older majors used M2 with the now-legacy mat.define-light-theme / mat.define-dark-theme API).
• Angular: v19 or newer required. v22 requires Node 22 or 26 and TypeScript 6. The skill assumes standalone components, control flow (@if / @for), and signal-based APIs.
• Sass: required for theming. The build pipeline must support .scss (Angular CLI does by default). Standalone CSS-only theming is not supported by Material's theming engine.
• Not supported: Material v18 and below (M2-only with mat.define-*-theme() API), Angular v18 or below (NgModule patterns + older animations API).

v22 breaking changes (from v21)

The v21 → v22 jump has real API drift, not just an Angular version bump. Watch for: