Angular : Firestoreのデータをページネーションしたい① ～ 超簡単なやり方

環境

Angular CLI: 7.1.4
Node: 10.15.3
OS: win32 x64
Angular: 7.1.4

"@angular/material": "^7.3.4"

前提

Firestoreからとってきたデータを以下のようにngFor文でづらづらっと並べていくHTMLがあったとする。

<div style="display:inline-block; width: 100%" *ngFor="let post of posts | async">
        <p>名前：{{ post.userName }}</p>
        <p>メッセージ：{{ post.userName }}</p>
        <p>投稿日時：{{ post.created }}</p>
</div>

ページネーションのやり方

なんと*ngFor文のうしろにパイプをかまして"slice: [ページインデックス番号] : [1ページ当たりのデータ件数]" を追記するだけ！

例：

<div style="display:inline-block; width: 100%" *ngFor="let post of posts | async | slice: 0:10">

これで1ページあたり10件表示するページネーションができる。

ページャーの作り方

あとは[ページインデックス番号]と[1ページ当たりのデータ件数]に渡す数値は変数にして関数を使って制御すればいい。HTMLにはページャー（クリックするとこ）を作成して、

<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>

コンポーネントのほうに、関数を作る。

  begin= 0; //[ページインデックス番号]
  length = 10; // [1ページ当たりのデータ件数]
  pager(page: number) {
    this.begin = this.length * page;
  }

こんな風になるみたい。

ページャーがかっこいいのはBootstrapのスタイルシートをインポートしているようだ。

結論

これだとデータ数が増えていったら手作業でページャーボタンを増やしていかなければならない。でも簡単ねー

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