Angular Materialを使ったページング機能の実装

はじめに
ページングの実装
まとめ

はじめに

ページングは、多くのデータを扱う際に非常に重要な機能です。ユーザーが効率よくデータを閲覧できるように、データを複数のページに分割して表示します。この記事では、Angular MaterialのMatPaginatorを使用して、データのページング機能を実装する方法について解説します。

Angularのバージョンは18で解説します。

ページングの実装

コンポーネントの作成

import { Component, OnInit } from '@angular/core';
import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';


@Component({
  selector: 'app-page',
  standalone: true,
  imports: [MatPaginatorModule],
  templateUrl: './page.component.html',
  styleUrl: './page.component.scss'
})
export class PageComponent implements OnInit {
  totalItems = 100;
  pageSize = 10;
  pageSizeOptions: number[] = [5, 10, 25, 100];
  pageIndex = 0;
  displayedData: any[] = [];

  data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

  ngOnInit() {
    this.updateDisplayedData();
  }

  onPageChange(event: PageEvent) {
    this.pageSize = event.pageSize;
    this.pageIndex = event.pageIndex;
    this.updateDisplayedData();
  }

  updateDisplayedData() {
    const startIndex = this.pageIndex * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    this.displayedData = this.data.slice(startIndex, endIndex);
  }
}

このコンポーネントでは、MatPaginatorを使用してデータをページング表示しています。データは、数値が入った100件のサンプルデータを作成し、それをページサイズごとに分割して表示しています。

onPageChangeメソッドでは、ページ番号やページサイズを切り替えて、それに合わせてデータも更新しています。

updateDisplayedDataメソッドでは、設定されているページに該当するデータに更新しています。

HTMLの作成

<div>
  <ul>
    @for (item of displayedData; track item.id) {
        <li>{{ item }}</li>
    }
  </ul>

  <mat-paginator
    [length]="totalItems"
    [pageSize]="pageSize"
    [pageSizeOptions]="pageSizeOptions"
    (page)="onPageChange($event)">
  </mat-paginator>
</div>

for文とMatPaginatorを使って、表示部分を作っています。

MatPaginatorのオプションは以下の通りです。