Saturday, February 16, 2019

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 !!!