Angular 15 - Migrating to MDC-based Angular Material Components

Question

Updated my Angular app to V15, app is working fine, but some of the component style is breaking because of the style applied on material element tag style name like (.mat-form-field, .mat-raised-button... etc )

Its working, if I am changing the the tag to .mat-**mdc**-raised-button . so my question here how can I fix this issue at once instead of changing code in each and every file.

Also wanted to know what is best practice for an enterprise application, should we apply the style on tags applied by material or always use CSS class name ?

Oceanid

can you do search + replace through all files? Maybe with a regex? – Hodeida

ultimately, even if you run scripts that help with the migration you'll want to only commit component by component because the changes are naturally likely going to be breaking in some fashion – Bromic

Hi @Prateek Sharma, is there any official MDC material css classes to refer to, because after upgrading Angular from 14 to 15, I have done MDC migration, which has placed so many TODO(mdc-migration) comments in most of the SCSS files in my application. I am not sure what should be manually updated in these places of TODO comments. – Indohittite

Answer 1

After running the mdc-migration I still found some places where the old .mat-... was used, without an -mdc suffix. The easiest to find them was a negative lookahead regex group.

The regex: \.mat-(?!mdc|icon). This matches every .mat- string that is not followed by mdc.

Using VSCode it is easy to find them, or also replace them.

To run the migration use the following command:

ng generate @angular/material:mdc-migration
# or
nx generate @angular/material:mdc-migration

Edit: The original regex was changed. The .mat-icon is also kept as it was based on Odilbek's comment.

Orford

This regex replaces .mat-icon to .mat-mdc-icon. But .mat-icon is not replaced with .mat-mdc-icon in MDC based Angular Material – Acrimonious

@OdilbekUtamuratov Thank you. I have added it to the regex: \.mat-(?!mdc|icon). – Orford

Answer 2

Following the Angular Material Migration Guide Migrating to MDC-based Angular Material Components :How to Migrate after you Update to Angular 15 you can run the following command to let it try migrate your Code:

ng generate @angular/material:mdc-migration

The Migration changed some of the following within my Code:

• CSS add -mdc-
  .mat-header-cell to
  .mat-mdc-header-cell
• Import remove Legacy
  import { MatLegacyTable as MatTable } from '@angular/material/legacy-table'; to
  import { MatTable } from '@angular/material/table';
• Add Comments
• ...

You can find these kind of links by following the official Angular Update Guide. Select the correct Versions, check to box I use Angular Material and switch Application complexity to Advanced to see all information.

Gregson

Answer 3

If you use Nx Workspace, you can use this command below:

nx g @angular/material:mdc-migration

Deposition

Isn't this the same as ng generate @angular/material:mdc-migration mentioned above – Ravage

Yes, It's the same, but it only has an effect when your project is using Nx Workspace. – Deposition

Answer 4

I faced the same issue with legacy components, this command seems to do the trick:

ng generate @angular/material:mdc-migration

Riptide

Answer 5

For my situation, the answer given by androbin was very helpful.

If in this situation (please see in the end...)

I will simply remember to do the same thing for the use case of classes.

Search for: "mat-(?!mdc) Replace with: "mat-mdc-

And after that, I noticed that only the sidenav is not updated they are still using mat-sidenav, mat-sidenav-content, etc.: IMG side-nav-after-changed-class-name

I'm using: "@angular/material": "^16.1.4". Im not sure if this is an isolated case due to my mistakes.

---

I liked the last part of the question. I see it as a good discussion to be open.

Also wanted to know what is best practice for an enterprise application, should we apply the style on tags applied by material or always use CSS class name?

My answer

I like to use always CSS class names. I use this convention: same name as the name that is given by Angular Material Team and add a modifier at the end, usually --name-of-project.

The situation

The above approach caused the second problem. After replacing only the declaration of CSS classes.

Reflection

This is not suggested by the Angular Material Team. Internal component elements

Avoid any custom styles or overrides on internal elements within Angular Material components. The DOM structure and CSS classes applied for each component may change at any time, causing custom styles to break.

This is what I have done. But I'm not afraid, because I know enough CSS to repair custom style breaks after some changes.

Interpreter

I just wonder how they can expect consumers to not edit their components, at least by CSS classes... At least now they added some CSS vars. Maybe I am also not supposed to override them? – Ariella