連載
» 2018年03月01日 05時00分 公開

Angular TIPS:Angularで「ページング」処理を実装するには?(ngFor/slice)

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

[山田祥寛,著]
「Angular TIPS」のインデックス

連載目次

現在では、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件ごとにページングされた。1ページ目
3件ごとにページングされた。2ページ目 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」のインデックス

Angular TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。