IgxOverlayService – データ取得中にモーダルのローディングインジケーターを表示するには

本記事では、Ignite UI for Angular の IgxGridComponent でデータ取得中に画面をブロックするモーダルのローディングインジケーターを表示する方法を説明します。中心となる API は IgxOverlayService です。

IgxGridComponent の設定

グリッドとともに、データ取得を開始するボタンを配置します。ボタンは loading シグナルの値に応じて活性・非活性を切り替えます。

<div class="gridContainer">
    <igx-grid #grid1 [data]="data()" [autoGenerate]="false" height="500px" width="800px">
        <igx-column ...></igx-column>
        ...
    </igx-grid>
    <button igxButton="contained" igxRipple="white" [disabled]="loading()" (click)="getData()">Get Data</button>
</div>

コンポーネント側では、オーバーレイを表示するために IgxOverlayService と ViewContainerRef を注入しておきます。

import { ViewContainerRef, inject, signal } from '@angular/core';
import { AbsoluteScrollStrategy, IgxOverlayService, OverlaySettings } from '@infragistics/igniteui-angular/core';
import { LoadingSpinnerComponent } from './loading-spinner.component';

export class App {
  private readonly overlayService = inject(IgxOverlayService);
  private readonly viewContainerRef = inject(ViewContainerRef);

  private overlayId?: string;

  public readonly loading = signal(false);
}

IgxOverlayService の使用

データ取得を開始するタイミングで IgxOverlayService.attach() によりオーバーレイ要素を生成し、show() で表示します。OverlaySettings の modal を true、closeOnOutsideClick を false に設定することで、モーダル表示となり、データ取得が完了するまでグリッドへの操作をブロックします。取得が完了したら hide() と detach() でオーバーレイを非表示にして破棄します。なお、オーバーレイの表示内容には IgxCircularProgressBarComponent をラップした LoadingSpinnerComponent を指定しています。

public getData(): void {
  if (this.loading()) {
    return;
  }

  this.loading.set(true);
  this.showOverlay();

  this.loadTimeoutId = setTimeout(() => {
    this.data.set(DATA);

    this.hideOverlay();
    this.loading.set(false);
  }, 5000);
}

private showOverlay(): void {
  const overlaySettings: OverlaySettings = {
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: true,
    closeOnOutsideClick: false
  };

  this.overlayId = this.overlayService.attach(LoadingSpinnerComponent, this.viewContainerRef, overlaySettings);
  this.overlayService.show(this.overlayId);
}

private hideOverlay(): void {
  if (this.overlayId) {
    this.overlayService.hide(this.overlayId);
    this.overlayService.detach(this.overlayId);
    this.overlayId = undefined;
  }
}

実行結果

「Get Data」ボタンをクリックすると、グリッド上にモーダルのローディングインジケーターが表示され、データ取得（本サンプルでは setTimeout による疑似的な非同期処理）が完了するまでグリッドへの操作がブロックされます。約 5 秒後にデータが表示されると同時に、オーバーレイが自動的に非表示になります。