IgxDialog – 全画面表示中にダイアログを表示したい

Fullscreen API で要素を全画面表示にすると、igx-dialog や igx-select のドロップダウンが表示されなくなります。全画面にする要素の中に igxOverlayOutlet を置き、オーバーレイの描画先としてその outlet を指定すると、全画面表示中でもダイアログを表示できます。

igx-dialog の設定

このサンプルでは、#fullscreenTarget を付けた <main> 要素を全画面表示の対象にします。ダイアログ（igx-dialog）の中には、フルーツを選ぶ igx-select を置いています。

<main #fullscreenTarget>
  <button type="button" igxButton="contained" (click)="toggleFullscreen()">
    {{ isFullscreen() ? '全画面を終了' : '全画面表示' }}
  </button>
  ...
</main>

<igx-dialog #dialog [closeOnOutsideSelect]="true">
  <igx-dialog-title>フルーツを選択</igx-dialog-title>
  <igx-select [formControl]="fruit" ...>
    ...
  </igx-select>
  <div igxDialogActions>
    <button type="button" igxButton="flat" (click)="dialog.close()">閉じる</button>
  </div>
</igx-dialog>

全画面表示の切り替えには、ブラウザ標準の requestFullscreen() と exitFullscreen() を使います。全画面表示になったかどうかは document:fullscreenchange イベントで受け取り、signal に反映します。

@Component({
  ...
  host: {
    '(document:fullscreenchange)': 'onFullscreenChange()',
  },
})
export class App {
  private readonly document = inject(DOCUMENT);
  private readonly fullscreenTarget = viewChild.required<ElementRef<HTMLElement>>('fullscreenTarget');

  protected readonly isFullscreen = signal(false);

  protected async toggleFullscreen(): Promise<void> {
    if (this.document.fullscreenElement) {
      await this.document.exitFullscreen();
    } else {
      await this.fullscreenTarget().nativeElement.requestFullscreen();
    }
  }

  protected onFullscreenChange(): void {
    this.isFullscreen.set(!!this.document.fullscreenElement);
  }
}

igxOverlayOutlet の使用

igx-dialog や igx-select のドロップダウンなどのオーバーレイは、既定では body の直下に描画されます。一方、全画面表示中に画面に表示されるのは、全画面にした要素とその子孫だけです。そのため、既定のままではオーバーレイが表示されません。

そこで、全画面にする <main> の中に <div igxOverlayOutlet #outlet="overlay-outlet"> を置きます。ダイアログを開くときは dialog.open({ outlet }) のように、オーバーレイ設定の outlet にこれを指定します。ダイアログの中の igx-select も独自のオーバーレイでドロップダウンを表示するので、[overlaySettings]="{ outlet }" で同じ outlet を指定します。

<main #fullscreenTarget>
  ...
  @if (isFullscreen()) {
    <button type="button" igxButton="outlined" (click)="dialog.open({ outlet })">ダイアログを開く</button>
  }
  <div igxOverlayOutlet #outlet="overlay-outlet"></div>
</main>

<igx-dialog #dialog ...>
  ...
  <igx-select [formControl]="fruit" [overlaySettings]="{ outlet }">
    ...
  </igx-select>
  ...
</igx-dialog>

igxOverlayOutlet を使うには、IgxOverlayOutletDirective をコンポーネントの imports に追加します。

import { IgxOverlayOutletDirective } from '@infragistics/igniteui-angular/core';

@Component({
  imports: [
    ...
    IgxOverlayOutletDirective,
  ],
  ...
})

実行結果

［全画面表示］ボタンで画面を全画面にしてから［ダイアログを開く］をクリックすると、全画面表示のままダイアログが表示されます。ダイアログの中の igx-select のドロップダウンも、全画面表示のまま開いて選択できます。