【保存版】Angular Materialで空データ時の「データが見つかりませんでした」メッセージの表示方法3選

2024-05-20

Angular Material データテーブルでデータがない場合に空メッセージを表示する方法

*ngIf ディレクティブは、条件に応じて要素を表示したり非表示にしたりするのに使用できます。この場合、dataSource.data プロパティが空かどうかをチェックして、空メッセージを表示できます。

<mat-table [dataSource]="dataSource">
  ...

  <ng-container matColumnDef="empty">
    <mat-header-cell *matHeaderCellDef> データ </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ng-container *ngIf="!dataSource.data.length">
        <span>データが見つかりませんでした。</span>
      </ng-container>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

ngNoData ディレクティブを使用する

Angular Material には、ngNoData ディレクティブが用意されています。このディレクティブは、データソースにデータがない場合にのみ表示される要素を定義するために使用できます。

<mat-table [dataSource]="dataSource">
  ...

  <ng-container matColumnDef="empty">
    <mat-header-cell *matHeaderCellDef> データ </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ng-template matCellDef="empty" ngNoData>
        <span>データが見つかりませんでした。</span>
      </ng-template>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

カスタムコンポーネントを使用する

より複雑な空メッセージを表示したい場合は、カスタムコンポーネントを作成できます。このコンポーネントは、データソースの状態に基づいて動的にコンテンツを更新できます。

<mat-table [dataSource]="dataSource">
  ...

  <ng-container matColumnDef="empty">
    <mat-header-cell *matHeaderCellDef> データ </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <app-no-data [dataSource]="dataSource"></app-no-data>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

@Component({
  selector: 'app-no-data',
  templateUrl: './no-data.component.html',
  styleUrls: ['./no-data.component.css']
})
export class NoDataComponent {
  @Input() dataSource: MatTableDataSource<any>;

  constructor() { }

  get isEmpty(): boolean {
    return this.dataSource.data.length === 0;
  }
}

<div *ngIf="isEmpty">
  <span>データが見つかりませんでした。</span>
  <button (click)="onSearch()"> 検索 </button>
</div>

これらの方法のいずれかを使用して、Angular Material データテーブルでデータがない場合に空メッセージを表示できます。どの方法を使用するかは、要件や好みの問題です。

補足

空メッセージのスタイルをカスタマイズするには、mat-table および mat-cell クラスに CSS ルールを追加できます。
データが見つかった場合にメッセージを表示することもできます。これを行うには、dataSource.data.length > 0 条件を使用します。
データソースが更新されたときに空メッセージを自動的に更新するには、dataSource.connect() メソッドを使用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Angular Material データテーブル</title>
  <link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>

  <script src="runtime.js" type="module"></script>
  <script src="polyfills.js" type="module"></script>
  <script src="main.js" type="module"></script>
</body>
</html>

// app.component.ts
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dataSource = new MatTableDataSource<any>([]);
  displayedColumns = ['name', 'age', 'city'];

  constructor() {
    this.dataSource.data = [
      { name: 'John Doe', age: 30, city: 'New York' },
      { name: 'Jane Doe', age: 25, city: 'Los Angeles' },
      { name: 'Peter Jones', age: 40, city: 'Chicago' }
    ];
  }
}

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> 名前 </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="age">
    <mat-header-cell *matHeaderCellDef> 年齢 </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.age}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="city">
    <mat-header-cell *matHeaderCellDef> 都市 </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.city}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

/* app.component.css */
mat-table {
  width: 100%;
}

このコードを実行すると、以下の表が表示されます。

名前	年齢	都市
John Doe	30	New York
Jane Doe	25	Los Angeles
Peter Jones	40	Chicago

データソースが空の場合、以下の空メッセージが表示されます。

データが見つかりませんでした。

このコードは、*ngIf ディレクティブを使用して空メッセージを表示する方法を示しています。他の方法で空メッセージを表示することもできます。詳細については、上記のドキュメントを参照してください。

Angular Material データテーブルでデータがない場合に空メッセージを表示するその他の方法

ngTemplate ディレクティブを使用して、データソースの状態に基づいて動的にコンテンツを生成できます。この方法は、より複雑な空メッセージを表示する場合に役立ちます。

<mat-table [dataSource]="dataSource">
  ...

  <ng-container matColumnDef="empty">
    <mat-header-cell *matHeaderCellDef> データ </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ng-template matCellDef="empty">
        <span *ngIf="!dataSource.data.length">
          データが見つかりませんでした。
          <button (click)="onSearch()"> 検索 </button>
        </span>
      </ng-template>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

プレースホルダー列を使用する

データソースが空の場合にのみ表示されるプレースホルダー列を追加できます。この方法は、シンプルな空メッセージを表示する場合に役立ちます。

<mat-table [dataSource]="dataSource">
  ...

  <ng-container matColumnDef="empty">
    <mat-header-cell *matHeaderCellDef> データ </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span *ngIf="!dataSource.data.length"> データが見つかりませんでした。 </span>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

ProgressBar を使用する

データがロードされている間、ProgressBar を表示してユーザーにフィードバックを提供できます。データソースが空の場合、ProgressBar を非表示にして空メッセージを表示できます。

<mat-table [dataSource]="dataSource">
  ...

  <mat-progress-bar *ngIf="dataSource.loading"></mat-progress-bar>

  <ng-container matColumnDef="empty">
    <mat-header-cell *matHeaderCellDef> データ </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span *ngIf="dataSource.loading"> データをロードしています... </span>
      <span *ngIf="!dataSource.loading && !dataSource.data.length"> データが見つかりませんでした。 </span>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>