Angular でのページネーション
![Angular でのページネーション](/img/Angular/feature-image---pagination-in-angular.webp)
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;
}
出力:
このように動作します。
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.
LinkedIn