angular-cdk

@angular/cdk（Component Dev Kit）

バージョン： 21.0.3（2026年2月） タグ： アクセシビリティ、ドラッグ＆ドロップ、オーバーレイ、仮想スクロール、ポータル

参考資料： ドキュメント — CDK の公式ドキュメント • GitHub • API

API の変更点

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

• 新機能：CDK のオーバーレイでブラウザー組み込みのポップオーバーを使用するようになり、アクセシビリティが向上しました。ソース

• 新機能：Angular 19 のシグナルベース API — CDK コンポーネントとの最新のシグナル連携

• 新機能：フォーカス管理の改善 — cdkTrapFocus と cdkFocusRegion のサポートを強化

• 新機能：ドラッグ＆ドロップの改善 — リスト間での項目のコピー機能を強化

• 非推奨：従来のオーバーレイ戦略 — 非推奨の方法ではなく、スクロール戦略の設定を使用してください

ベストプラクティス

• カスタム UI コンポーネントには CDK を使用します — Material のスタイルを使わずに独自のコンポーネントを作成できます

import { OverlayModule } from '@angular/cdk/overlay';
import { PortalModule } from '@angular/cdk/portal';

@Component({
  standalone: true,
  imports: [OverlayModule, PortalModule],
  // ...
})
export class CustomDropdownComponent {}

• フローティングパネルには Overlay を使用します — ツールチップ、ドロップダウン、モーダル

import { OverlayRef, Overlay } from '@angular/cdk/overlay';

export class TooltipService {
  private overlayRef: OverlayRef;

  constructor(private overlay: Overlay) {
    this.overlayRef = this.overlay.create({
      hasBackdrop: true,
      positionStrategy: this.overlay.position()
        .connectedTo(origin, { originX: 'center', originY: 'bottom' })
        .withOffsetX(0)
        .withOffsetY(8)
    });
  }
}

• 並べ替え可能なリストには Drag & Drop を使用します

import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

drop(event: CdkDragDrop<string[]>) {
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    transferArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  }
}

• 大規模なリストには Virtual Scroll を使用します

import { ScrollingModule } from '@angular/cdk/scrolling';

@Component({
  standalone: true,
  imports: [ScrollingModule],
  template: `
    <cdk-virtual-scroll-viewport itemSize="50" class="viewport">
      <div *cdkVirtualFor="let item of items">{{item.name}}</div>
    </cdk-virtual-scroll-viewport>
  `
})
export class ListComponent {}

• 動的コンテンツには Portal を使用します

import { DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';

@Component({ template: `<ng-template #dialogTemplate>Content</ng-template>` })
export class DialogComponent {
  @ViewChild('dialogTemplate') dialogTemplate!: TemplatePortal;

  attach() {
    const portalOutlet = new DomPortalOutlet(this.document.body);
    portalOutlet.attach(this.dialogTemplate);
  }
}

• アクセシビリティには A11y ユーティリティを使用します

import { A11yModule, CdkTrapFocus, LiveAnnouncer } from '@angular/cdk/a11y';

@Component({
  standalone: true,
  imports: [A11yModule],
  template: `
    <div cdkTrapFocus>
      <button cdkFocusInitial>First</button>
      <button>Second</button>
    </div>
  `
})
export class AccessibleComponent {
  constructor(private liveAnnouncer: LiveAnnouncer) {
    this.liveAnnouncer.announce('Message for screen readers');
  }
}

• レスポンシブなブレークポイントには Layout を使用します

import { LayoutModule } from '@angular/cdk/layout';

@Component({
  standalone: true,
  imports: [LayoutModule],
  template: `
    <div *ngIf="isHandset$ | async">
      Mobile content
    </div>
  `
})
export class ResponsiveComponent {
  isHandset$ = this.breakpointObserver.observe('(max-width: 599px)');
}