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

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