Angular v21 CDK Overlay でサポートされたネイティブ popover の紹介

DRANK

!11月20日に Angular v21 がリリースされた。Vitest がテストランナーの標準になるなど多くの変更の中で、Angular CDK の Overlay においてOverlay Container を利用せずに ネイティブ popover を利用するオプションが追加された。ここでは Overlay Container を利用しないオプションと、この変更は我々開発者にとってどのようなメリットがあるのかを紹介したい。 API とは何かそもそも Overlay API とは何か、それは画面上でレイヤーが一段上のオーバーレイ表示を簡単に作成できるAngular CDK の API である。dialog や tooltip などを簡単に実現できる。 Overlay Container というものでハンドリングしている。Overlay Container の実態は、body に配置された単一の div 要素である。以下のデモ動画を見てほしい。ダイアログを表示するボタンを押下すると<div class="cdk-overlay-container"></div>にダイアログが描画されていることがわかるだろう。これが Overlay Container である。popoverのサポートにより脱 Overlay Container が可能にAngular v21 から新たに ネイティブの popover の仕組みを利用することで、 Overlay Container を使わないオプションが新たに追加…