DEV Community

Cover image for Angular Material Blocks now supports Angular v22!
Angular Material Dev profile image Dharmen Shah
Dharmen Shah for Angular Material Dev

Posted on • Originally published at ui.angular-material.dev

Angular Material Blocks now supports Angular v22!

#angular #angularmaterial #webdev #typescript

Angular v22 is here, and so is Angular Material Blocks support for it. Keeping blocks compatible with the latest Angular release is a core promise of this project, and this release is no exception.

Today, we’re happy to announce that Angular Material Blocks now supports Angular v22.

Angular v22 support means you can keep your app on the newest Angular version while continuing to copy/paste blocks, or integrate them via CLI/MCP, with the same design consistency and SSR/SSG compatibility you expect.

Highlights

  • Updated the project to Angular v22 and Angular Material v22
  • Ran the official v22 migrations across every block, template and library
  • v22 makes OnPush the implicit default — blocks that relied on the previous behaviour now opt out explicitly with ChangeDetectionStrategy.Eager, so rendering behaviour is unchanged
  • Ensured all blocks remain server-compatible (SSR/SSG / pre-rendering friendly)
  • All the premium templates are now compatible with Angular v22
  • Continued focus on minimal diffs between supported Angular versions so teams can upgrade smoothly
  • CLI remains the simplest way to stay up to date

How to upgrade?

First, upgrade your Angular application to Angular v22.

ng update @angular/core @angular/cli @angular/material
Enter fullscreen mode Exit fullscreen mode

Then update your installed blocks using the CLI:

npx @ngm-dev/cli update
Enter fullscreen mode Exit fullscreen mode

That’s it — you’ll now have Angular v22 compatible blocks in your project.

What about older Angular versions?

Angular Material Blocks continues to support multiple Angular versions. If you’re not ready to move to v22 yet, you can stay on your current Angular version and still use the CLI/MCP — just make sure you’re on the latest @ngm-dev/cli.

On web, over the "Code" tab of any block you’ll now find a picker to toggle between v22, v21, v20 and v19.

Each older version is generated from the v22 source one step at a time — v22 → v21 → v20 → v19 — so every version only carries the changes it actually needs, and the code you copy stays as close to the original block as possible.

As always, we’ll do our best to keep older versions supported, but new blocks and improvements are primarily optimized for the latest Angular release.

Looking ahead

We’re excited to keep shipping more blocks, more templates, and better tooling — while staying aligned with the latest Angular and Angular Material releases.

If you have feedback, feature requests, or upgrade pain points, please share them with us on X (formerly Twitter), LinkedIn, or email.

Top comments (0)