@angular/material & @angular/cdk

API Changes

• NEW: Angular Aria — New low-level component library for accessible, headless components that can be styled custom source
• NEW: CDK overlays now use browser's built-in popovers for improved accessibility source
• NEW: Material Design system tokens — Use utility classes to apply Material tokens directly in templates source
• NEW: CDK Drag & Drop improvements — Allow copying items between lists source
• NEW: Angular v21 — Full support for new Angular features including zoneless change detection

Best Practices

• Use standalone components — Import Material components directly without NgModule

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

@Component({
  standalone: true,
  imports: [MatButtonModule, MatCardModule],
  // ...
})
export class ExampleComponent {}

• Use CDK for custom components — Use CDK (Component Dev Kit) for behavior primitives like drag-drop, overlays, menus without Material styling
• Use CDK Virtual Scroll for large lists — Improve performance with

  cdkVirtualScrollViewport

  instead of rendering all items

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items">{{item.name}}</div>
</cdk-virtual-scroll-viewport>

• Use

  trackBy

  with

  ngFor

  — Prevent unnecessary DOM re-renders
• Customize themes with SCSS — Use Material's theming system for custom colors and typography
• Use

  ChangeDetectionStrategy.OnPush

  — Improve performance with default change detection strategy
• Follow accessibility guidelines — Use ARIA labels, keyboard navigation, and focus management provided by CDK components