cdkConnectedOverlay で、パネルを展開する

背景

ボタンクリックでパネルを展開するコードを書いてた時に、「Angular の機能で簡単に書けるよ〜」と教えてもらったので、cdkConnectedOverlay についてまとめてみる。

cdkConnectedOverlay について

Overlay の Directive の一つ。

FlexibleConnectedPositionStrategy を使用してオーバーレイの宣言的な作成を容易にするディレクティブ

いい感じにボタンクリックでパネルを作ってくれます。

コード例

sample.html

<!-- オーバーレイの起点 -->
<div
  cdkOverlayOrigin
  (click)         = "open = !open"
  #trigger        = "cdkOverlayOrigin"
>
</div>

<!-- パネルを展開する部分 -->
<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayBackdropClass = "cdk-overlay-transparent-backdrop"
  [cdkConnectedOverlayOrigin]      = "trigger"
  [cdkConnectedOverlayOpen]        = "open"
  [cdkConnectedOverlayHasBackdrop] = "true"
  (backdropClick)                  = "open = false"
>
</ng-template>

sample.ts

export class AAAComponent {
  open = false
}

backdrop を使用することで、パネル範囲外クリック時にクローズできる。

参考