Solving Style Issues: Angular Material MDC Migration Guide
Tags: angular, mdcmigration, material, materialmdc
Published: 2023-06-19 10:08:57

## Angular Material MDC Migration

After migrating to the latest Material Design Components (MDC), many projects, including ours, have encountered style-related issues. In this write-up, we will explain how we resolved them.

We acknowledge that the core problem lies in creating components based on Material Components and modifying them to suit our specific use cases.

Here are the steps we followed to migrate from Material Components to Material MDC Components.

> Note: You can Choose legacy components, but anyways we decided to go with MDC Migration.

### Steps for MDC Migration

#### Upgrade Angular, Material, and run the mdc-migration script provided by the Material team.

You can either copy this code and create a batch file to run it or execute each step individually.

```cmd
@ECHO OFF
call npm i typescript@4.8.x --force
call npm i zone.js @angular/flex-layout@15.0.0-beta.42 @angular-eslint/builder@15.x @angular-eslint/eslint-plugin@15.x @angular-eslint/eslint-plugin-template@15.x @angular-eslint/schematics@15.x @angular-eslint/template-parser@15.x  --force
call npx ng update @angular/core@15 @angular/cli@15 --allow-dirty --force
call npx ng update @angular/material@15 --allow-dirty --force
call npx ng generate @angular/material:mdc-migration
PAUSE
```

#### Update your theme file
```css
@use '@angular/material' as mat;
$ec--mat-typography: mat.define-typography-config(
    $font-family: $aal-font-family,
    $headline-4: mat.define-typography-level($aal-font-h1...),
    $headline-3: mat.define-typography-level($aal-font-h2...),
    ...more settings
);
/* This is the new way of defining a theme from Angular 15 */
$ec--mat-light-theme: mat.define-light-theme((
  color: (
      primary: $aal--mat-primary-color,
      accent: $aal--mat-accent-color,
      warn: $aal--mat-warn-color
  ),
  typography: $aal--mat-typography,
  density: -1, // you can experiment with densities that suit your application
));

@include mat.typography-hierarchy($ec--mat-typography);
@include mat.core();
/**
  It is important to include all component themes in the body
 */
body {
    @include mat.all-component-themes($aal--mat-light-theme);
    @include mat.button-density(-2); // these densities make more sense for my project, feel free to experiment
    @include mat.icon-button-density(-2); // these densities make more sense for my project, feel free to experiment
}

```
  
#### Search throughout your application and replace the following classes, if you have used them. 

Here is a comprehensive list of classes that are not automatically migrated by "ng generate @angular/material:mdc-migration"

| Component | Old Class | New Class |
| --- | --- | ---|
| mat-tab | mat-tab-label-active | mdc-tab--active|
||mat-tab-label-content	| mdc-tab__content |
||mat-tab-label-container	|mat-mdc-tab-label-container|
|| mat-tab-list |	mat-mdc-tab-list|
||mat-tab-body-wrapper |	mat-mdc-tab-body-wrapper|
||mat-tab-label|	mat-mdc-tab|
||mat-tab-header-pagination-controls-enabled |	mat-mdc-tab-header-pagination-controls-enabled|
||mat-tab-header-pagination	|mat-mdc-tab-header-pagination|
||mat-tab-labels	| mat-mdc-tab-labels|
|mat-chip|mat-chip-list	| mat-mdc-chip-list|
||mat-chip-list-wrapper |	mat-chip-list-wrapper|
|mat-checkbox|mat-checkbox-frame	| mdc-checkbox__checkmark|
||mat-checkbox-label|	mdc-label|
||mat-checkbox-checked	| mat-mdc-checkbox-checked|
||mat-checkbox-label|mdc-label|
||mat-checkbox-layout|-|
|mat-button|mat-button-focus-overlay|mat-mdc-focus-indicator|
|mat-radio|mat-radio-outer-circle	| mdc-radio__outer-circle|
||mat-radio-inner-circle	| mdc-radio__inner-circle|
||mat-radio-checked|	mat-mdc-radio-checked|
||mat-radio-label-content|	mdc-label|
||mat-radio-label|mdc -label|
|mat-progress-bar|mat-progress-bar-buffer |	mdc-linear-progress__buffer|
|mat-form-field|mat-form-field-flex | mat-mdc-form-field-flex|
||mat-form-field-wrapper	| mat-mdc-text-field-wrapper|
||mat-form-field-underline|	mdc-line-ripple|
||mat-form-field-subscript-wrapper	| mat-mdc-form-field-subscript-wrapper|
||mat-form-field-prefix	| mat-mdc-form-field-text-prefix|
||mat-form-field-suffix	| mat-mdc-form-field-text-suffix|
||mat-form-field-infix	| mat-mdc-form-text-infix|
||mat-form-field-label	| mat-mdc-floating-label|
|mat-dialog|mat-dialog-container	| mdc-dialog__container|
||mat-dialog-content	| mat-mdc-dialog-content|
|No Change|||
||mat-button-toggle||
||mat-button-toggle-checked||
||mat-button-toggle-disabled||
||mat-button-toggle-focus-overlay||


### Final Thoughts
It is highly likely that this setup may not be entirely comprehensive and depends on your project's settings. However, please feel free to add comments about your upgrades, as they may assist other projects.