Angular Paginator

Paginator displays a dropdown of page sizes for the user to choose from. The options for this dropdown can be set via PageSizeOptions.

The current page size will always appear in the dropdown, even if it is not included in the page size options. provides navigation for paged information used with a table.

Paginator
linkcodeopen_in_new

Items per page:

Basic use

Each paginator instance requires:

The number of items per page (default set to 50)
The total number of items being paged

The current page index is by default at 0 but can be explicitly set via the page index.

When the user interacts with the Paginator, a PageEvent will be fired that can be used to update any associated data views.

Internationalization

Labels can be customized for Paginator by providing an instance of your MatPaginatorIntl. It will allow you to change the following:

Labels for the length of each page.
The category text is displayed to the user.
Tooltip messages are on navigation buttons.

Paginator uses role="group" to group its child controls semantically. You must add the aria-label or aria-labelledby attribute to the with a label that describes the content handled by the pagination control.

You can set aria-label attributes for buttons and select controls within the Paginator in MatPaginatorIntl.

Angular eight pagination component

Pagination is implemented with thecomponent that comes with the JW-angular-pagination package available on npm.

Installation

Install the Angular 8 pagination component with the npm install JW-angular-pagination command.

Integration with your Angular Eight app

Import the JwPaginationComponent into your Angular app.module.ts and add it to the declaration array to make it available to other components within the Angular module.

From the example this is the app module (app.module.ts), the pagination component is imported on line 3 and added to the declarations on line 13.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JwPaginationComponent } from 'jw-angular-pagination';
import { AppComponent } from './app.component';
@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent,
        JwPaginationComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Usage

There are two essential properties to use the Angular 8 pagination component:

Items - the array of items to be paged
change page - a callback function to handle the change page event
There are also some optional properties:
Page Size - the number of items displayed on each page (10 by default)
maxPages - The maximum number of page links to be displayed in the pagination nav (10 by default)
Initial page - the starting page to be displayed (defaults to 1)

Example Angular 8 components with pagination.

It is the app component (app.component.ts) from the example, and it creates a hardcoded array of items to be paged in the ngOnInit() method and updates the current page of items in the onChangePage() callback method.

import { Component, OnInit } from '@angular/core';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
    items = [];
    pageOfItems: Array<any>;
    constructor() { }
    ngOnInit() {
        // an example array of 150 items to be paged
        this.items = Array(150).fill(0).map((x, i) => ({ id: (i + 1), name: `Item ${i + 1}`}));
    }
    onChangePage(pageOfItems: Array<any>) {
        // update current page of items
        this.pageOfItems = pageOfItems;
    }
}

Example Angular 8 Component Template with Pagination

It is the app component template (app.component.html) from the example. The pagination component is bound to the app component's item property using the Angular model binding attribute [item] = "item", and is bound to the app component's onchangePage() method using the Angular event binding attribute (changePage) = ". onChangePage($event)".

<!-- main app container -->
<div class="card text-center m-3">
    <h3 class="card-header">Angular 8 Pagination Example</h3>
    <div class="card-body">
        <div *ngFor="let item of pageOfItems">{{item.name}}</div>
    </div>
    <div class="card-footer pb-0 pt-3">
        <jw-pagination [items]="items" (changePage)="onChangePage($event)"></jw-pagination>
    </div>
</div>

Styling the Pagination Component

The JW Angular pagination component is unstyled by default; you can use the below CSS selectors to add your custom styles.

You can also plug in Bootstrap (3.x or 4.x) which the component works well with, that's what I used in the example.

.pagination - Pagination component container (ul element)
.pagination .page-item - All list items in the pagination component
.pagination .page-item .page-link - All pagination links including first, last, previous and next
.pagination .number-item - All page numbers (1, 2, 3 etc) pagination elements
.pagination .first-item - The 'First' pagination element
.pagination .last-item - The 'Last' pagination element
.pagination .previous-item - The 'Previous' pagination element
.pagination .next-item - The 'Next' pagination element

Hiding Pagination Buttons

To hide any buttons, you can set them to display: none, using the CSS selectors described above.

More Customisation of the Angular Pagination Component

If you want to do other customizations, such as changing the HTML template of the component, I would recommend just copying the pagination component code into your custom Angular component.

To use this approach you need to install the jw-paginate package from npm with the command npm install jw-paginate . This is the complete pagination component code, also available here on GitHub.

import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import paginate = require('jw-paginate');
@Component({
  moduleId: module.id,
  selector: 'jw-pagination',
  template: `<ul *ngIf="pager.pages && pager.pages.length" class="pagination">
  <li [ngClass]="{disabled:pager.currentPage === 1}" class="page-item first-item">
      <a (click)="setPage(1)" class="page-link">First</a>
  </li>
  <li [ngClass]="{disabled:pager.currentPage === 1}" class="page-item previous-item">
      <a (click)="setPage(pager.currentPage - 1)" class="page-link">Previous</a>
  </li>
  <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}" class="page-item number-item">
      <a (click)="setPage(page)" class="page-link">{{page}}</a>
  </li>
  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item next-item">
      <a (click)="setPage(pager.currentPage + 1)" class="page-link">Next</a>
  </li>
  <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item last-item">
      <a (click)="setPage(pager.totalPages)" class="page-link">Last</a>
  </li>
</ul>`
})
export class JwPaginationComponent implements OnInit, OnChanges {
  @Input() items: Array<any>;
  @Output() changePage = new EventEmitter<any>(true);
  @Input() initialPage = 1;
  @Input() pageSize = 10;
  @Input() maxPages = 10;
  pager: any = {};
  ngOnInit() {
    // set page if items array isn't empty
    if (this.items && this.items.length) {
      this.setPage(this.initialPage);
    }
  }
  ngOnChanges(changes: SimpleChanges) {
    // reset page if items array has changed
    if (changes.items.currentValue !== changes.items.previousValue) {
      this.setPage(this.initialPage);
    }
  }
  private setPage(page: number) {
    // get new pager object for specified page
    this.pager = paginate(this.items.length, page, this.pageSize, this.maxPages);
    // get new page of items from items array
    var pageOfItems = this.items.slice(this.pager.startIndex, this.pager.endIndex + 1);
    // call change page function in parent component
    this.changePage.emit(pageOfItems);
  }
}

Next TopicWhat is an Angular Service

← prev next →