Material Design Components (MDC) is a contemporary CSS framework that focuses on high performance and scalability. The MDC based components in Angular Material 15 are up-to-date, while the legacy components are deprecated.
1. What is MDC
MDC are a set of reliable, reusable, and user-friendly web components that adhere to the Material Design specification. MDC components are based on Web Components, which means that they can be used in any web framework. The modularity and composability of MDC components surpasses that of traditional Angular Material components. The Angular Material UI component library is based on MDC to provide a unified set of components implemented in accordance with Google's Material Design principles.
2. How to migrate
Update to the Angular Material v15 vsersion with this command:
ng update @angular/material@15
As part of this update, a schematic will run to automatically move our application to use the legacy imports containing the old component implementations. This is a quick way to run our application on v15 with minimal changes.
When we decide that we want to start migrating to the MDC-based components we run:
ng generate @angular/material:mdc-migration
The above command automatically updates the typescript, styles and template of the new implementation. This command offers a partial migration of new implementation in the application. In places where the migration tool is not able to automatically update our code it will add comments for a developer to follow up. These TODO comments all have a common format for easy searching.
E.g.
/* TODO(mdc-migration): The following rule targets internal classes of **** that may no longer applay for the MDC version.*/
These comments mostly appear on above CSS selectors that target legacy components internal classes that don't exist anymore. Targeting Angular Material internal component classes is against good practices and this is one of the reasons why. Depending on the size of the application and the intricacies of targeted internal classes, bringing your app back to visual fidelity it had before might be a daunting job.
All of the changes this migration brigns can be seen here.
