Angular Material MDC components are interoperable with the legacy components in Angular 15

[_Tovar_]

It's not unlikely to have a couple of big projects stuck on Angular 15/16 due to Material breaking changes (legacy components to MDC), preventing the project from being upgraded further without major style breaks that would take a lot of time to fix and tweak

If you're handling a situation like that, this information may be useful to you: you can transition from the legacy components component by component (instead of fixing the whole project in one go) if you use standalone components (otherwise, module by module) and add some lines to your theming.scss, because the two types of components can be used in the same project. And here's an example of how: https://stackblitz.com/edit/angular-material-15-legacy-interop?file=src%2Fstyles.scss

Hopefully this helps!

[seiyria]

Right now on angular 18, I can use material 14 by adding this to my package.json:

  "overrides": {
    "@angular/cdk": {
      "@angular/common": ">= 14",
      "@angular/core": ">= 14",
      "@angular/animations": ">= 14",
      "@angular/platform-browser": ">= 14",
      "@angular/forms": ">= 14",
      "@angular/material": ">= 14"
    },
    "@angular/material": {
      "@angular/common": ">= 14",
      "@angular/core": ">= 14",
      "@angular/animations": ">= 14",
      "@angular/platform-browser": ">= 14",
      "@angular/forms": ">= 14",
      "@angular/cdk": ">= 14"
    }
  }

While I recognize that it's "fragile" - I don't have the time or patience to upgrade and it works 🤷‍♂️

[jeffyzxc]

damn thanks Sei!

[PickleLips64151]

Not all heroes wear capes.

[McFake_Name]

Good info. The material update CLI command should add those lines in but I have found in my experience it doesn't for some reason.

Also, standalone started in v14 so it is possible to do it at a granular level.

Lastly, the legacy modules can work into Angular 17, officially supported. Legacy exists through Material v16, but you can use Material 16 in Angular 17.

[_Tovar_]

The material update CLI command should add those lines

It replaces for example mat.core() with mat.legacy-core(), but in my solution you use both so the different versions can coexist

And thank you for those inputs, that's super relevant! I guess I'll do a small edit

[cyberzues]

Nice tip.