Angular でのページネーション

Rana Hasnain Khan 2022年2月1日

Angular Angular Pagination

Angular でのページ付けと、ページ付けを実装するのに最適なライブラリとその使用方法を紹介します。

Angular でのページ付け

1000 または 10,000 を超えるアイテムのデータセットがある場合、完全なデータセットをロードするには多くの時間とメモリがかかるため、すべてのアイテムを 1 ページまたは一度に表示することはできません。多くのデータセットを表示する最良の方法は、Angular でページ付けを使用することです。

Angular でのページ付けには多くのライブラリを使用できます。ただし、このチュートリアルでは、実装が簡単でシンプルな ngx-pagination を使用します。

`ngx-pagination` のインストール

ngx-pagination ライブラリをインストールするには、プロジェクトでターミナルを開き、次のコマンドを実行する必要があります。

# angular CLI
npm install ngx-pagination

ライブラリをインストールしたら、app.module.ts ファイルの ngx-pagination から NgxPaginationModule をインポートします。また、@NgModule に NgxPaginationModule をインポートします。

したがって、app.module.ts のコードは次のようになります。

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgxPaginationModule } from 'ngx-pagination';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NgxPaginationModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

いくつかのデータと、現在のページの番号を格納する number 変数を使用して配列を作成します。app.component.ts のコードは次のようになります。

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  pages: number = 1;
  dataset: any[] = ['1','2','3','4','5','6','7','8','9','10'];
}

データセットを表示するビューを作成します。app.component.html は次のようになります。

# angular
<div>
  <h2
    *ngFor="
      let data of dataset | paginate: { itemsPerPage: 2, currentPage: pages }
    "
  >
    {{ data }}
  </h2>
</div>

<pagination-controls (pageChange)="pages = $event"></pagination-controls>

app.component.css で見栄えを良くするために CSS コードを書いてみましょう。

# angular
div{
  text-align: center;
  padding: 10px;
}
h2{
  border: 1px solid black;
  padding: 10px;
}

出力：

Angular のあるスクリーンショットのページ付け

このように動作します。

Angular でのページ付けの最終結果

著者： Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Angular でのページ付け

ngx-pagination のインストール

`ngx-pagination` のインストール