Custom Pagination Component In Angular 6

Introduction

 

Today, we will learn how to create a custom component for Pagination in Angular and also, how to use the component in another component as a child component.

 

Code 

 

Full code available on my github repository app-pagination . Please do contribute on my github reposiotry for enhacements and optimizations.

Prerequisites

Basic knowledge of Angular components/modules and TypeScript.

 

Here, I will create a custom component for pagination and will show you how to use that component in your app. Before proceeding, you must have  basic knowledge of Angular.

 

I am assuming that you have already created an Angular app. Here, I'll show how to create a component in your existing app.

 

Note
I will use bootstrap 4 for designing the pagination component, So, you have to install the bootstrap package too in your existing app.

Step 1

Create a folder named app-pagination in your app's component folder. We will create all the components and modules in this folder only.

Step 2

Now, we will create the component for pagination. You can create the component by executing the below command in the app-pagination directory created in the first step.

ng generate component app-pagination

The above command will generate .ts and .html files for our component. Paste the below code in the app-pagination.component.ts file generated from above command.

 

app.pagination.component.ts

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

@Component({
  selector: 'app-pagination',
  templateUrl: './app-pagination.component.html'
})

export class PaginationComponent implements OnChanges {

    @Input() totalRecords = 0;
    @Input() recordsPerPage = 0;

    @Output() onPageChange: EventEmitter<number> = new EventEmitter();

    public pages: number [] = [];
    activePage: number;

    ngOnChanges(): any {
      const pageCount = this.getPageCount();
      this.pages = this.getArrayOfPage(pageCount);
      this.activePage = 1;
      this.onPageChange.emit(1);
    }

    private  getPageCount(): number {
      let totalPage = 0;

      if (this.totalRecords > 0 && this.recordsPerPage > 0) {
        const pageCount = this.totalRecords / this.recordsPerPage;
        const roundedPageCount = Math.floor(pageCount);

        totalPage = roundedPageCount < pageCount ? roundedPageCount + 1 : roundedPageCount;
      }

      return totalPage;
    }

    private getArrayOfPage(pageCount: number): number [] {
      const pageArray = [];

      if (pageCount > 0) {
          for(let i = 1 ; i <= pageCount ; i++) {
            pageArray.push(i);
          }
      }

      return pageArray;
    }

    onClickPage(pageNumber: number): void {
        if (pageNumber >= 1 && pageNumber <= this.pages.length) {
            this.activePage = pageNumber;
            this.onPageChange.emit(this.activePage);
        }
    }
}

 Here, we have created the pagination component. This component is accepting two inputs - TotalRecords and RecordsPerPage,

1. RecordsPerPage is used for the number of items we want to display in single page. 
2. TotalRecords is used for the total number of items count which we want to display in pages.

 Also, we have created EventEmitter which will emit the currently active page number to parent component whenever we will click on the page number.

 

Step 3

 

Paste the below code in app-pagination.component.html file.

<nav aria-label="page navigation example">
  <ul class="pagination">
    <li class="page-item" (click)="onClickPage(activePage - 1)"><a class="page-link" href="javascript:void(0);">«
        Previous</a></li>
    <li class="page-item" [ngClass]="{'active': activePage === item}" *ngFor="let item of pages"
      (click)="onClickPage(item)"><a class="page-link" href="javascript:void(0);">{{item}}</a></li>
    <li class="page-item" (click)="onClickPage(activePage + 1)"><a class="page-link" href="javascript:void(0);">Next
        »</a></li>
  </ul>
</nav>

Here, we have added the HTML template for our component. We have used *ngFor directive to iterate over all the page counts and display those pages in li element. We have bound the click event of li to onClickPage() method which we have defined in app-pagination.component.ts.

 

Step 4 

 

Now, we will create the module for the above created component so, that we can use this component in any other component.

 

Note
You can directly use this component by directly declaring this component in the app.module.ts file without creating a separate module for this component. But this approach will not enable lazy loading. To enable the advantage of lazy loading, we will declare this component in a separate module.

 

Create the app-pagination.module.ts file in app-pagination directory created in the first step and paste the below code.

import { NgModule } from '@angular/core';
import { CommonModule} from '@angular/common';

import {PaginationComponent} from './app-pagination.component';

@NgModule({
    declarations: [
        PaginationComponent
    ],
    imports: [
        CommonModule
    ],
    exports: [
        PaginationComponent
    ]
})
export class PaginationModule
{
}

Here, we have declared our component in declaration [] and exported the same component so we can use this component in another module. Our component is ready to use in another component. Now, I will demonstrate how to use this pagination component in any other component.

 

Note
For the sake of simplicity, I will use this component app.component but you can use it any of the components.

 

Step 5

 

Import the PaginationModule created in the above step in app.module.ts file so that we can use the created component in app.component.

 

Step 6

 

Paste the below code in app.component.ts file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  activePage:number = 0;

  displayActivePage(activePageNumber:number){
    this.activePage = activePageNumber
  }
}

Here, we have created one method, i.e., displayActivePage() to catch the emitted value of active page from child component.

 

Step 7

 

Paste the below code in app.component.html.

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h4>Simple Table</h4>
        </div>
        <div class="col-lg-8 col-md-10 ml-auto mr-auto">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th>Product Name</th>
                            <th>Type</th>
                            <th>Qty</th>
                            <th class="text-right">Price</th>
                            <th class="text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center">1</td>
                            <td>Moleskine Agenda</td>
                            <td>Office</td>
                            <td>25</td>
                            <td class="text-right">€ 49</td>
                            <td class="text-right">€ 1,225</td>
                        </tr>
                        <tr>
                            <td class="text-center">2</td>
                            <td>Stabilo Pen</td>
                            <td>Office</td>
                            <td>30</td>
                            <td class="text-right">€ 10</td>
                            <td class="text-right">€ 300</td>
                        </tr>
                        <tr>
                            <td class="text-center">3</td>
                            <td>A4 Paper Pack</td>
                            <td>Office</td>
                            <td>50</td>
                            <td class="text-right">€ 10.99</td>
                            <td class="text-right">€ 109</td>
                        </tr>
                        <tr>
                            <td class="text-center">4</td>
                            <td>Apple iPad</td>
                            <td>Meeting</td>
                            <td>10</td>
                            <td class="text-right">€ 499.00</td>
                            <td class="text-right">€ 4,990</td>
                        </tr>
                        <tr>
                            <td class="text-center">5</td>
                            <td>Apple iPhone</td>
                            <td>Communication</td>
                            <td>10</td>
                            <td class="text-right">€ 599.00</td>
                            <td class="text-right">€ 5,999</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="row">
            <div class="col-lg-8 col-md-10 ml-auto mr-auto">
                <span><strong>Current Active Page = </strong> {{activePage}}</span>
            </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-md-10 ml-auto mr-auto">
             <div class="float-right"> <app-pagination [totalRecords]="23" [recordsPerPage]="5" (onPageChange)="displayActivePage($event)"></app-pagination> </div>
        </div>
    </div>
</div>

Conclusion

 

We have created the pagination component successfully and also, we have used the created component in app.component.ts. Let me know your reviews and comments. 

 

Full code available on my github repository  app-pagination . Please do contribute on my github reposiotry for enhacements and optimizations.