[Ignite UI for Angular 10.2 新機能] IgxOverlay – createAbsoluteOverlaySettings と createRelativeOverlaySettings による非モーダル作成

Ignite UI for Angular 10.2.7 バージョン時点での情報に基づいています。

IgtxOverlayService に、createAbsoluteOverlaySettings メソッドと createRelativeOverlaySettings メソッドが追加されました。これらメソッドにより、非モーダルのオーバーレイを作成することができます。

createRelativeOverlaySettings メソッドの実装例

export class AppComponent {
  ...
  @ViewChild('dropDown') dropDown: IgxDropDownComponent;
  @ViewChild('button') button: ElementRef;
  private _overlaySettings: OverlaySettings;
  relPosition: RelativePosition;
  positionStrategy = RelativePositionStrategy.Auto;
  ...

  public toggleDropDown() {
    this._overlaySettings = IgxOverlayService.createRelativeOverlaySettings(
      this.button.nativeElement,
      this.relPosition,
      this.positionStrategy);
    this.dropDown.toggle(this._overlaySettings);
  }
}

実行結果

非モーダルのオーバーレイ（ドロップ）を追加することができました。