はこです。こんにちわ！
Angular CDK はとても便利な機能なのですが、ドキュメントがとっつきづらいのもあって、なんとなく1年ぐらい避けてました。
今回改めて見直すと死ぬほど便利だったのです！
カンタンなまとめが存在してなさそうだったので、カンタンにまとめました。
Common Behaviors
汎用的な機能です。
- Clipboard: クリップボードにコピーする機能。
- Drag and Drop: ドラッグ&ドロップの解決。たとえば
<div cdkDrag >ドラッグ・ミー！</div>でドラッグ可能になる。 - Scrolling: 仮想スクロール。
<cdk-virtual-scroll-viewport><div *cdkVirtualFor="let i of million"></div></cdk-virtual-scroll-viewport>とすると、百万行のfor文でも、表示部分のみレンダリングしてくれる。 - Layout : レスポンシブ用のレイアウト。画面サイズ変更、および回転(スマホのみ)を検知する
breakpointObserverが変更を通知してくれる。 - Observers :
<ng-content>の内容が変更されたときに検知するcdkObserveContentを提供する。 - Portal : 内部要素を書き換えます。router-outletに似てるかも？タブグループの表現などで利用。
- Overlay: オーバーレイを作成。モーダルダイアログなどに。Portal(前述)を継承してるので、オーバーレイの内部要素はPortalとして注入可能。
- Platform: UserAgent関連情報。
isAndroidのような判定と、利用可能なイベントリスナ一覧等 - Accessibility : アクセシビリティ機能。要素にフォーカスがあるときやスクリーンリーダー等で見た目を変更する。カスタムのボタン作る等に使う。
- Bidirectionality: 双方向性。RTL(アラビア語のように右から左に読む)言語を検知してレイアウト変えたりするための、
- Text field:
<textarea>と<input>関連の便利機能。しかしオートフィル監視と自動リサイズしか無い。。
Components
スタイルが適用されてない(つまりバニラな)コンポーネント。
- Stepper : 入力ウィザード的な。例 を見てもらうほうが早そう…。
- Table :
<table><tr><th><td>の関係を再構成して forで回しやすくしたテーブル。便利なのだがとっつきづらさも否めない。。。 - Tree: ツリー型メニュー。https://material.angular.io/cdk/tree/overview 見るのが速い。
Testing
テストのためのツール
- Component Harnesses: 3種類のAPIがある。
- サードパーティのUIライブラリを使ったテスト作成者向け。具体的には、AngularMaterialのメニューコンポーネントを使っていて、これを操作するユニットテストが書きたいケース。
ComponentHarness を使ってテストする。 - ComponentHarness作成者向け。つまりUIライブラリの作成者向け。
- テスト環境の作成者向け。つまり新しいテストフレームワークで使うための。
一番多い、1のケースでのテストの書き方としてはこんな感じになる。
sample.spec.js
it('loads harnesses', async () => {
const buttonHarness = await loader.getHarness(MyButtonHarness);
// クリックを確実に実行する
await buttonHarness.click();
// 文言をチェック
const text = await buttonHarness.text();
expect(text).toBe('aaa');
});
感想
Drag and Dropや Scrolling, Layout はいろいろなところで使えそうですね！
逆に TreeやStepper は、Angular Materialのほうにもあります。独自カスタマイズのデザインのTreeを作成する場合にはCDK役に立つかも？