Simple Pagination with Angular 8 and ng-bootstrap

Updated on: December 10, 2019

You can try following Angular 8, ng-bootstrap example to show pagination on the web page, it has move to First, move to Last, move to previous, move to next record buttons along with highlighted selected option. 

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

Related Articles