angular material CDK オーバーレイを使用して、複数選択ドロップダウン コンポーネントを作成しようとしています。以下のコードのように (Angular Material Select コンポーネントから取得)
<div class="multi-select-dd">
<label class="multi-select-dd-text">{{ label }}</label>
<div class="multi-select-dd-text-container">
<ul class="taggle_list"
cdk-overlay-origin
(click)="toggle()"
#origin="cdkOverlayOrigin"
#trigger>
<li>
<input type="text"
class="taggle_input"
tabindex="1"
style="padding-left: 0px; padding-right: 0px;"
autocomplete="off">
</li>
</ul>
</div>
</div>
<ng-template cdk-connected-overlay
cdkConnectedOverlayHasBackdrop
cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
[cdkConnectedOverlayOrigin]="origin"
[cdkConnectedOverlayOpen]="panelOpen"
[cdkConnectedOverlayPositions]="_positions"
[cdkConnectedOverlayMinWidth]="_triggerRect?.width"
[cdkConnectedOverlayOffsetY]="_offsetY"
(backdropClick)="close()"
(attach)="_onAttached()"
(detach)="close()">
<div style="background-color: lightgreen;">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
</ng-template>
そのため、ドロップダウンからアイテムが選択されるたびに、接続された位置であるボックスにチップとして表示されます。元の要素の高さを変更します。
質問:オーバーレイの原点の高さの変更時にオーバーレイを startY 位置に再配置する標準的な方法はありますか?