除了 Angular Material 外，還有 Angular CDK 來提供我們一些核心行為的功能。其中也包含了 Dialog 、Table 與 Tree 等，與 Material 只差在有沒有樣式的設定。

Clipboard

有時候會特地提供一個複製按鈕，來讓使用者更方便地複製特定內容，此時我們可以引用 ClipboardModule 模組，以使用 CDK 所提供的 cdkCopyToClipboard 指令實作此功能。順帶一提，cdkCopyToClipboardAttempts 可以用來決定要複製的次數。

<button mat-icon-button [cdkCopyToClipboard]="row.subject" [cdkCopyToClipboardAttempts]="5">
  <mat-icon>content_copy</mat-icon>
</button>

如果希望在程式作業過程中複製資料，則可以使用 Clipboard 服務的 copy 方法。

import { Clipboard } from '@angular/cdk/clipboard';

private readonly clipboard = inject(Clipboard);

copySubject(subject: string): void {
  this.clipboard.copy(subject);
}

SelectedModel

資料的選擇也是應用程式中常用的功能，此時也可以利用 CDK 中的 SelectedModel 類別，來記錄所選擇的資料。在實體化此類別時，可以設定是否為多選、初始選擇值、選擇變更時是否發出通知，以及物件相等比較函式四個參數。

constructor(
  _multiple?: boolean,
  initiallySelectedValues?: T[],
  _emitChanges?: boolean,
  compareWith?: ((o1: T, o2: T) => boolean) | undefined
)

如此一來，我們就可以利用此類別的 select 、deselect與 toggle 等方式來選取與取消選取資料。或是利用 isSelected 來判斷特定資料是否有被選取。

Platform

CDK 還提供Platform 服務，來檢查使用者是用哪個環境，其中包含了如 Android、iOS、Microsoft Edge 或 Safari 等不同渲染引撆資訊；以及此環境可以支援的表單 (getSupportedInputTypes)、是否支援捲軸事件 (supportsScrollBehavior) 等判斷函式，對於需要判斷多種環境上很有幫助。