Angular 8 Tutorial - Simple Pagination Example

Angular 8 Tutorial - Simple Pagination Example

In this article, you'll see a simple example of how to implement client-side pagination in Angular 8.

In this article, you'll see a simple example of how to implement client-side pagination in Angular 8.

Example built with Angular 8.0.0

The example contains a hard coded array of 150 objects split into 15 pages to demonstrate how the pagination component works.

Angular 8 Pagination Component

Pagination is implemented with the `` component that comes with the jw-angular-pagination package available on npm.


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

Integration with your Angular 8 app

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

This is the app module (app.module.ts) from the example, 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';

    imports: [
    declarations: [
    bootstrap: [AppComponent]
export class AppModule { }


There are 2 required properties for using the Angular 8 pagination component:

  • items - the array of items to be paged
  • changePage - a callback function for handling the changePage event

There are also a few optional properties:

  • pageSize - the number of items displayed on each page (defaults to 10)
  • maxPages - the max number of page links to display in the pagination nav (defaults to 10)
  • initialPage - the initial page to display (defaults to 1)

Example Angular 8 Component with Pagination

This is the app component (app.component.ts) from the example, 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;

    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) {
        // update current page of items
        this.pageOfItems = pageOfItems;

Example Angular 8 Component Template with Pagination

This is the app component template (app.component.html) from the example, it renders the current page of items using the *ngFor Angular directive on line 5, and includes the pagination component (``) on line 8.

The pagination component is bound to items property of the app component using the Angular model binding attribute [items]="items", and is bound to the onChangePage() method of the app component using the Angular event binding attribute (changePage)="onChangePage($event)".

    ### Angular 8 Pagination Example


Styling the Pagination Component

The JW Angular pagination component is unstyled by default, you can use the below CSS selectors to add your own 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 of the buttons you can simply set them to display: none; using the css selectors described above.

More Customisation of the Angular Pagination Component

If you want to make other customisations such as changing the HTML template of the component, I'd recommend just copying the pagination component code into your own custom Angular component, it's only 60 lines and will give complete flexibility to make any changes you like.

To use this approach you need to install the jw-paginate package from npm with the command npm install jw-paginate. The jw-paginate package contains the pagination logic used to paginate any array or list of items. For more info about the pagination logic see this post.

This is the complete pagination component code, it's also available here on GitHub.

import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';

import paginate = require('jw-paginate');

  selector: 'jw-pagination',
  template: `







export class JwPaginationComponent implements OnInit, OnChanges {
  @Input() items: Array;
  @Output() changePage = new EventEmitter(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) {

  ngOnChanges(changes: SimpleChanges) {
    // reset page if items array has changed
    if (changes.items.currentValue !== changes.items.previousValue) {

  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

angular typescript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular 8 Updates And Summary of New Features

Angular 8 Updates And Summary of New Features. Differential loading, web workers, Dynamic imports for lazy routes, CLI workflow improvements. Ivy and bazel.

TypeScript, Angular, Firebase & Angular Material Master class Tutorial

As the course progresses, you'll get familiar with: TypeScript, Angular Application Architecture, and Angular CLI. Angular Modules and Angular Components. Angular's Component LifeCycle Hooks....

Angular Tutorial: Create a CRUD App with Angular CLI and TypeScript

Angular Tutorial: Create a CRUD App with Angular CLI and TypeScript. This tutorial gets you off the ground with Angular. We are going to use the official CLI (command line) tool to generate boilerplate code.