@angular/material & @angular/cdk

バージョン: 21.0.3 (2026年2月) タグ: Material Design、CDK、コンポーネント、UIライブラリ

リファレンス: ドキュメント — コンポーネント、ガイド • CDKドキュメント • GitHubイシュー • チェンジログ

APIの変更

このセクションでは、バージョン固有の最近のAPI変更について説明します。

• NEW: Angular Aria — アクセシブルでヘッドレスなコンポーネント用の新しい低レベルコンポーネントライブラリ。カスタムスタイリングが可能です 出典

• NEW: CDKオーバーレイがブラウザの組み込みポップオーバーを使用 — アクセシビリティの向上 出典

• NEW: Material Designシステムトークン — ユーティリティクラスを使用してMaterialトークンをテンプレートに直接適用できます 出典

• NEW: CDKドラッグ&ドロップの改善 — リスト間のアイテムコピーに対応 出典

• NEW: Angular v21 — ゾーンレス変更検出を含む新しいAngular機能に完全対応

ベストプラクティス

• スタンドアロンコンポーネントを使用 — NgModuleなしでMaterialコンポーネントを直接インポートします

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 {}

• カスタムコンポーネント用にCDKを使用 — ドラッグ&ドロップ、オーバーレイ、メニューなどの動作プリミティブ用にCDK(Component Dev Kit)を使用します。Materialスタイリングは不要です

• 大規模なリスト用にCDK Virtual Scrollを使用 — すべてのアイテムをレンダリングする代わりにcdkVirtualScrollViewportを使用してパフォーマンスを向上させます

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

• ngForでtrackByを使用 — 不要なDOM再レンダリングを防ぎます

• SCSSでテーマをカスタマイズ — Materialのテーミングシステムを使用してカスタム色とタイポグラフィを適用します

• ChangeDetectionStrategy.OnPushを使用 — デフォルト変更検出戦略でパフォーマンスを向上させます

• アクセシビリティガイドラインに従う — CDKコンポーネントが提供するARIAラベル、キーボードナビゲーション、フォーカス管理を使用します