Angularで「ページング」処理を実装するには？（ngFor／slice）：Angular TIPS

ngForディレクティブとsliceパイプを使って、ページャー（＝ページングのためのリンクリスト）を実装する方法を説明する。

[山田祥寛，著]

連載目次

※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。

【対応バージョン】

　Angular 5以降。v5時点で執筆しました。

　ngForディレクティブとsliceパイプを組み合わせることで、ページング処理もカンタンに実装できます。

　例えば以下は、あらかじめ作成しておいた記事情報を3件ごとにページで区切る例です。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <table class="table">
     <tr>
     <th>タイトル</th><th>著者</th><th>公開日</th>
      </tr>
      <!-- ［1］sliceパイプを準備-->
      <tr *ngFor="let article of articles | slice: begin: begin+length">
      <td><a href="{{article.url}}">{{article.title}}</a></td>
      <td>{{article.author}}</td>
      <td>{{article.released | date: 'mediumDate'}}</td>
    </tr>
    </table>
      <!-- ［4］ページャーを表示 -->
      <ul class="pagination">
        <li><a class="page-link" href="#" (click)="pager(0)">1</a></li>
        <li><a class="page-link" href="#" (click)="pager(1)">2</a></li>
        <li><a class="page-link" href="#" (click)="pager(2)">3</a></li>
      </ul>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // ［2］表示開始位置／最大件数を設定
  begin= 0;
  length = 3;

  articles = [
    {
      url: 'http://www.buildinsider.net/web/jqueryref',
      title: 'jQuery逆引きリファレンス',
      author: 'WINGSプロジェクト',
      released: new Date(2017, 10, 1)
    },
    ……中略……
  ];

  // ［3］ページャークリック時の処理
  pager(page: number) {
    this.begin = this.length * page;
  }
}

記事情報をページング表示するコード（app.component.ts）
さらに、Bootstrap（後述の［Note］を参照）のスタイルシートをインポートするために、index.htmlファイルに<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">のような記述が必要になる。

▼

3件ごとにページングされた

　ページャー（＝ページングのためのリンクリスト）を実装するにはまず、「begin件目からbegin＋length件のデータを抜き出す」ためのsliceパイプを準備します（［1］）。beginの初期値は0（先頭）、lengthはこの例であれば3です（［2］）。lengthの値は、ページサイズに応じて変更しても構いません。

　あとは、ページャークリック時（［3］）に、begin（開始位置）の値を変えていくだけです。開始位置は「ページサイズ（length）×ページ数」で求められます。

［Note］

　［4］の<ul class="pagination">や<a class="page-link"〜>は、Bootstrapで定義されたスタイルクラスです。Bootstrapを利用することで、こうしたページャーを手軽に実装できます。

処理対象：ディレクティブ（Directive）　カテゴリ：基本
API：NgForOf（*ngFor）　カテゴリ：@angular > common > DIRECTIVE（ディレクティブ）
処理対象：PIPE（パイプ）　カテゴリ：基本
API：SlicePipe（slice）　カテゴリ：@angular > common > PIPE（パイプ）

「Angular TIPS」