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 ?

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.