Simple Pagination with Angular 8 and ng-bootstrap

Pagination in every Web Application is required to show list of data on the web page, there are various Third Party tools avaiable in Angular application to show the pagination, here in this article we have implemented ng-bootstrap tool to show the pagination. Ng-bootstrap Pagination is simple to use and easy to implement for Angular application, refer the following steps to show the Pagination on Angular application using ng-bootstrap tool:

This sample application can be accessed here: https://stackblitz.com/edit/angular-8-ng-bootstrap-simple-pagination

Follow the below steps and write the code as shown in following steps to achieve the above pagination in your Angular 8 application. 

Step 1: Create your Angular 8 Application using following command:

ng new MyAngularApp

Step 2: Open the code using following command in Visual Studio Code or you can skip this step if you have already opened the application in an editor

cd MyAngularApp

code .

Step 3: Run the following command to install ng-bootstrap in your application. After installing ng-boostrap in your application, you can use all ng-bootstrap widgets in your application. You can know about all the components from https://ng-bootstrap.github.io/#/components/alert/examples 

npm install --save @ng-bootstrap/ng-bootstrap

Step 4: Now, open app.module.ts file and add the following import statement and add "NgbModule" module in @NgModule imports statement as shown below:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports:      [ BrowserModule, NgbModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

Step 5: Add the following line of code on the components's .ts file where you want to show the pagination, in this example we have shown it on the home page of the application:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  page = 1;
  pageSize =10;
  items = [];
  constructor() {
   for(let i = 1; i <= 100; i++){
      this.items.push({Name: 'Shop ' + i});
   }
  }
}

Step 6: Now, Open app.component.html file (You can open your template file where you want to show the pagination) and the following code:

<div style="margin:20px;">
  <table>
     <tr *ngFor="let item of items | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
       <td>{{item.Name}}</td>

     </tr>
  </table>
  <ngb-pagination [collectionSize]="items.length" [(page)]="page" [maxSize]="5" [rotate]="true" [ellipses]="false" [boundaryLinks]="true"></ngb-pagination>
</div>

Step 7: Now, Open styles.css file and add the following CSS into this file:

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}
.page-link:hover {
    z-index: 2;
    color: #0056b3;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
}

Step 8: Now run your angular app using following command:

ng serve -o

It should open your Angular Home page and you can navigate to your pagination page to see the pagination we implemeted using ng-bootstrap in Angular 8 application. We have saved this pagination example in stackblitz.com, you can refer to it using following URL:

https://stackblitz.com/edit/angular-8-ng-bootstrap-simple-pagination