CODEWITHSUNDEEP
angularangular15
Prateek Sharma
Prateek Sharma

Reputation: 137

Angular 15 - Migrating to MDC-based Angular Material Components

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 ?

Upvotes: 10

Views: 30780

Answers (6)

Gokul
Gokul

Reputation: 384

After running the

`ng generate @angular/material:mdc-migration`

You can use the regex to find all the mat- and replace with mat-mdc except for icons using \.mat-(?!mdc|icon) will check for the classes, if you have used element tags directly update the regex

\bmat-(?!mdc\b|icon)

https://v15.material.angular.io/guide/mdc-migration

Upvotes: 0

androbin
androbin

Reputation: 1759

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.

find and replace example in VSCode

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.

Upvotes: 11

Lodo
Lodo

Reputation: 31

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.

Upvotes: 2

Loc Nguyen
Loc Nguyen

Reputation: 41

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

nx g @angular/material:mdc-migration

Upvotes: 4

ZCode
ZCode

Reputation: 63

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

ng generate @angular/material:mdc-migration

Upvotes: 2

JIT Solution
JIT Solution

Reputation: 1053

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.

Upvotes: 7

Related Questions