ng2-table: Sorting with Pagination

Under Design...

ng2-table: Sorting

Under Design...

ngx-Bootstrap: Pagination

In this post you will find how to work with ngx-Bootstrap to implement Pagination feature using Angular 7 CLI

Get ngx-Bootstrap using below command:

npm install ngx-Bootstrap --save

Below is how the package.json file should look like (used at the time of writing this post)

{
"name": "gbpprototype-web",
"version": "0.0.0",
"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

},
"private": true,
"dependencies": {

"@angular/animations": "~7.0.0",

"@angular/common": "~7.0.0",

"@angular/compiler": "~7.0.0",

"@angular/core": "~7.0.0",

"@angular/forms": "~7.0.0",

"@angular/http": "~7.0.0",

"@angular/platform-browser": "~7.0.0",

"@angular/platform-browser-dynamic": "~7.0.0",

"@angular/router": "~7.0.0",

"angular-font-awesome": "^3.1.2",

"core-js": "^2.5.4",

"font-awesome": "^4.7.0",

"ng2-bootstrap": "^1.6.3",

"ng2-table": "^1.3.2",

"ngx-bootstrap": "^3.2.0",

"rxjs": "~6.3.3",

"rxjs-compat": "^6.3.3",

"underscore": "^1.9.1",

"zone.js": "~0.8.26"

},
"devDependencies": {

"@angular-devkit/build-angular": "^0.13.0",

"@angular/cli": "~7.0.2",

"@angular/compiler-cli": "~7.0.0",

"@angular/language-service": "~7.0.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"@types/node": "~8.9.4",

"bootstrap": "^3.3.7",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~3.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~7.0.0",

"tslint": "~5.11.0",

"typescript": "~3.1.1"

}
}

Import and update app.module.ts as below to include ngx-Bootstrap/Pagination

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PaginationModule } from 'ngx-bootstrap/pagination';

@NgModule({

declarations: [

      ...

],

imports: [

      BrowserModule

      ,PaginationModule.forRoot()

providers: [],

bootstrap: []

})

Import and change the component.ts as below to include ngx-Bootstrap/Pagination

import { NgModule } from '@angular/core';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@Component({

selector: 'BasicPagination',

templateUrl:'basicPaginationView.html',

providers: [ProductService]

})

export class BasicPaginationComponent implements OnInit {

currentPage: number;

maxPageSize: number;

ngOnInit() : void {}

pageChanged(event: PageChangedEvent): void {

      const startItem = (event.page - 1) * event.itemsPerPage;

      const endItem = event.page * event.itemsPerPage;

      this.returnedProducts = this.products.slice(startItem, endItem);

}

}

Add below code to .html file which will include Pagination control to the view

<div class="pull-right">

<!-- pager -->

<pagination id="test" [totalItems] = totalProducts [itemsPerPage]=maxPageSize [directionLinks]="false" (pageChanged)="pageChanged($event)"></pagination>

</div>

With this I am concluding the illustration. Feel free to share your feedback. Happy Programming !!!