Updating Angular Material 19 to 20

Starting with Angular Material 19

We are going to start with where we ended chapter 8: Adding more colors.

Updating Angular 19 to 20

1. Checking for updates

ng update

2. Update Angular CLI & Core

ng update @angular/cli

2.1 @angular/cli migrations

When asked about migrations from @angular/cli, select all and press ENTER.

◉ [use-application-builder] Migrate application projects to the new build system. (https://angular.dev/tools/cli/build-system-migration)

2.2 @angular/core migrations

When asked about migrations from @angular/core, select all and press ENTER.

◉ [control-flow-migration] Converts the entire application to block control flow syntax.
◉ [router-current-navigation] Replaces usages of the deprecated Router.getCurrentNavigation method with the Router.currentNavigation signal.

What changed in Angular 20

Angular 20 brings several improvements and changes to the framework. The major updates include:

1. Control Flow Migration: Angular 20 continues to promote the new block control flow syntax introduced in Angular 17, providing automated migration tools to convert your templates.
2. Router Improvements: The Router.getCurrentNavigation() method has been deprecated in favor of the new Router.currentNavigation signal, aligning with Angular’s signal-based reactivity model.
3. Build System Updates: The application builder continues to receive improvements and optimizations for better build performance.

1. Control Flow Migration

If you haven’t already migrated to the new control flow syntax, Angular 20 provides automated migration that converts:

• *ngIf to @if
• *ngFor to @for
• *ngSwitch to @switch

Example of the new syntax:

1
<!-- Old syntax -->
2
<div *ngIf="isVisible">Content</div>
3

4
<!-- New syntax -->
5
@if (isVisible) {
6
  <div>Content</div>
7
}

2. Router.currentNavigation Signal

The Router.getCurrentNavigation() method is now deprecated. Instead, use the signal-based Router.currentNavigation:

// New approach with signal
const navigation = this.router.currentNavigation;
const state = navigation()?.extras.state;

// Old approach (deprecated)
const navigation = this.router.getCurrentNavigation();
const state = navigation?.extras.state;

Updating Angular Material 20

After updating Angular CLI and Core, we need to update Angular Material to version 20.

ng update @angular/material

This command will:

1. Update @angular/material package to version 20
2. Update @angular/cdk (Component Dev Kit) to version 20
3. Run migrations for below breaking changes:
   • Rename any CSS variables beginning with --mdc- to be --mat-
   • Rename Angular Material component token CSS variables that were renamed so that the base component’s name came first. For example, --mat-circular-progress will be renamed to --mat-progress-spinner. One more, from --mat-tonal-button- to --mat-button-tonal (component goes first, then variant). To view the full list, check out the schematic code on GitHub.

What changed in Angular Material 20

Angular Material 20 maintains compatibility with the theming system introduced in version 19. The major focus areas include:

1. Continued M3 Theme Support

Angular Material 20 continues to support the Material 3 (M3) design system with the same theming API introduced in version 19:

• mat.theme() mixin for applying themes
• mat.theme-overrides() for customizing specific tokens
• System variables with --mat-sys-* prefix

2. Component Updates

All Angular Material components have been updated to work seamlessly with Angular 20’s improvements, including:

• Enhanced signal compatibility
• Better performance with the new control flow syntax
• Improved accessibility features

3. No Breaking Theme Changes

Unlike the update from Angular Material 18 to 19, the update from 19 to 20 doesn’t require any major theming changes. Your existing theme configuration will continue to work without modifications.

Summary of Updates

The update from Angular 19 to 20 and Angular Material 19 to 20 is relatively straightforward compared to previous major version updates:

These were the changes related to our course, but Angular Material 20 has more changes and improvements, let’s see what more changed in Angular Material 20.

New Features

Tonal Button Support

Angular Material 20 introduces tonal buttons, a new Material Design 3 variant that provides a middle ground between filled and outlined buttons.

1
import { Component } from '@angular/core';
2

3
@Component({
4
  selector: 'app-button-example',
5
  template: `
6
    <button matButton="tonal">Basic</button>
7
    <button matButton="tonal" disabled>Disabled</button>
8
    <a matButton="tonal" href="#">Link</a>
9
  `
10
})
11
export class ButtonExampleComponent {}

The button appearance can now be set dynamically:

1
@Component({
2
  selector: 'app-dynamic-button',
3
  template: `
4
    <button [matButton]="buttonAppearance()">Basic</button>
5
    <button [matButton]="buttonAppearance()" disabled>Disabled</button>
6
    <a [matButton]="buttonAppearance()" href="#">Link</a>
7

8
    <br />
9

10
    <mat-radio-group aria-label="Select an option" [(ngModel)]="buttonAppearance">
11
      <mat-radio-button value="elevated">Elevated</mat-radio-button>
12
      <mat-radio-button value="outlined">Outlined</mat-radio-button>
13
      <mat-radio-button value="tonal">Tonal</mat-radio-button>
14
      <mat-radio-button value="filled">Filled</mat-radio-button>
15
    </mat-radio-group>
16

17
  `,
18
  imports: [MatButtonModule, FormsModule, MatRadioModule],
19
})
20
export class DynamicButtonComponent {
21
  buttonAppearance = signal<'elevated' | 'outlined' | 'tonal' | 'filled'>(
22
    'elevated'
23
  );
24
}

Demo:

Filled Card Variant

Cards now support a filled variant that provides better visual hierarchy and surface distinction. You can use the appearance="filled" property to set the variant.

1
<mat-card class="example-card" appearance="filled">
2
  <mat-card-header>
3
    <div mat-card-avatar class="example-header-image"></div>
4
    <mat-card-title>Shiba Inu</mat-card-title>
5
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
6
  </mat-card-header>
7
  <img
8
    mat-card-image
9
    src="https://material.angular.dev/assets/img/examples/shiba2.jpg"
10
    alt="Photo of a Shiba Inu"
11
  />
12
  <mat-card-content>
13
    <p>
14
      The Shiba Inu is the smallest of the six original and distinct spitz
15
      breeds of dog from Japan. A small, agile dog that copes very well with
16
      mountainous terrain, the Shiba Inu was originally bred for hunting.
17
    </p>
18
  </mat-card-content>
19
  <mat-card-actions>
20
    <button matButton>LIKE</button>
21
    <button matButton>SHARE</button>
22
  </mat-card-actions>
23
</mat-card>

Demo:

Enhanced Dialog Control

The dialog component now includes a closePredicate option that provides fine-grained control over when dialogs can be closed.

1
export interface DialogData {
2
  animal: string;
3
  name: string;
4
}
5

6
@Component({
7
  selector: 'dialog-overview-example',
8
  templateUrl: 'dialog-overview-example.html',
9
  imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule],
10
  changeDetection: ChangeDetectionStrategy.OnPush,
11
})
12
export class DialogOverviewExample {
13
  readonly animal = signal('');
14
  readonly name = model('');
15
  readonly dialog = inject(MatDialog);
16

17
  openDialog(): void {
18
    const canClose = <Result = string>(result: Result | undefined): boolean => {
19
      return typeof result === 'string' && result.toLowerCase() === 'dog';
20
    };
21
    const dialogRef = this.dialog.open<
22
      DialogOverviewExampleDialog,
23
      DialogData,
24
      string | undefined
25
    >(DialogOverviewExampleDialog, {
26
      data: { name: this.name(), animal: this.animal() },
27
      closePredicate: canClose,
28
    });
29

30
    dialogRef.afterClosed().subscribe((result) => {
31
      if (result !== undefined) {
32
        this.animal.set(result);
33
      }
34
    });
35
  }
36
}
37

38
@Component({
39
  selector: 'dialog-overview-example-dialog',
40
  templateUrl: 'dialog-overview-example-dialog.html',
41
  imports: [
42
    MatFormFieldModule,
43
    MatInputModule,
44
    FormsModule,
45
    MatButtonModule,
46
    MatDialogTitle,
47
    MatDialogContent,
48
    MatDialogActions,
49
    MatDialogClose,
50
  ],
51
})
52
export class DialogOverviewExampleDialog {
53
  readonly dialogRef = inject(MatDialogRef<DialogOverviewExampleDialog>);
54
  readonly data = inject<DialogData>(MAT_DIALOG_DATA);
55
  readonly animal = model(this.data.animal);
56
}

Demo:

Drag and Drop Enhancements

The CDK drag-drop module introduces the resetToBoundary method for better boundary management. This is helpful if the boundary-element’s size is changed dynamically and you want to make sure that the dragged element stays within the boundary.

1
@Component({
2
  selector: 'cdk-drag-drop-boundary-example',
3
  templateUrl: 'cdk-drag-drop-boundary-example.html',
4
  styleUrl: 'cdk-drag-drop-boundary-example.css',
5
  imports: [CdkDrag, MatButtonModule],
6
})
7
export class CdkDragDropBoundaryExample {
8
  @ViewChild('boundaryElement') boundaryElement: ElementRef<HTMLElement>;
9

10
  @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
11
  @ViewChild(CdkDrag) dragInstance: CdkDrag;
12

13
  setBoundary(height: string, width: string) {
14
    this.boundaryElement.nativeElement.style.height = height;
15
    this.boundaryElement.nativeElement.style.width = width;
16
  }
17

18
  resetToBoundary() {
19
    this.dragInstance.resetToBoundary();
20
  }
21
}

Demo:

Autocomplete Backdrop Support

Autocomplete now supports overlay backdrops for better focus management. You can provide a hasBackdrop property using MAT_AUTOCOMPLETE_DEFAULT_OPTIONS injection token.

1
@Component({
2
  // rest
3
  providers: [
4
    {
5
      provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
6
      useValue: { hasBackdrop: true },
7
    },
8
  ],
9
})
10
export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
11
  // content reduced for brevity
12
}

Demo:

Other Changes

• Angular Material now automatically respects the user’s motion preferences set at the system level through the prefers-reduced-motion media query.
• Form fields now better preserve externally set aria-describedby attributes across all form controls.
• Form fields now use optimized DOM access patterns and ResizeObserver for better performance.
• The overlay system now provides tree-shakeable alternatives for better bundle optimization.
• Chip inputs now properly handle placeholders and the disabledInteractive property.
• The slider component now properly handles null values and improved token management.
• Tabs now handle zero animation duration properly, preventing flickering issues.

Conclusion

Angular Material 20 represents a significant step forward in the library’s evolution, bringing Material Design 3 features, improved accessibility, better performance, and modernized APIs. The new tonal buttons, filled cards, enhanced dialogs, and performance optimizations make this a compelling upgrade for Angular applications.

The breaking changes, while requiring some migration effort, help streamline the API surface and remove deprecated patterns. The provided schematics and migration tools help automate much of the upgrade process.

For detailed migration instructions and breaking change information, consult the official Angular Material changelog.