Pagination is a usefull component that helps you display page numbers for your data collections. I ended up building my own simple component after spending too much time trying to customize already existing ones added in the project by my coleagues. I wanted something simple, to do only what I need, in a clear way.
Let’s suppose we already have a working project for this example, I am using the default angular template available in Visual Studio for this post.
Create a new component
First step is to create a new component. I am generating a new one using the Angular CLI commands:
PS C:\Users\scb\Desktop\scb.pagination> ng g c pagination
// pagination.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'scb-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.css']
})
export class SCBPaginationComponent {
constructor() {}
}
Required inputs / output
To properly buid the pagination behaviour we need at least two input parameters and an output event.
Input parameters:
- totalItems – number of items in the collection that pagination should handle
- pageSize – number of items per page
Output events:
- pageChange – emits events when a user clicks previus/next buttons
At this point our component can be used like this
<scb-pagination
[totalItems]="100"
[pageSize]="5"
(pageChange)="onPageChange($event)">
</scb-pagination>
HTML template
I want my component to look as simple as possible, but nice, like this:

//pagination.component.html
<ul class="pagination">
<li>
<a class="btn" href="#"
(click)="first($event)"
[ngClass]="{ 'disabled': isFirstPage }">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a class="btn" href="#"
(click)="prev($event)"
[ngClass]="{ 'disabled': isFirstPage }">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a>
{{startItem}} - {{endItem}} of {{totalItems}}
</a>
</li>
<li>
<a class="btn" href="#"
(click)="next($event)"
[ngClass]="{ 'disabled': isLastPage }">
<span aria-hidden="true">»</span>
</a>
</li>
<li>
<a class="btn" href="#"
(click)="last($event)"
[ngClass]="{ 'disabled': isLastPage }">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
Typescript
//pagination.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'scb-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.css']
})
export class SCBPaginationComponent {
@Input() totalItems: number;
@Input() pageSize: number;
@Output() pageChange = new EventEmitter<number>();
public page: number = 1;
get startItem() {
return ((this.page - 1) * this.pageSize) + 1;
}
get endItem() {
var end = this.page * this.pageSize;
return end < this.totalItems ? end : this.totalItems;
}
get isFirstPage() {
return this.page == 1 ? true : false;
}
get isLastPage() {
return this.endItem == this.totalItems ? true : false;
}
constructor() {
}
first(event) {
event.preventDefault();
this.page = 1;
this.pageChange.emit(this.page);
}
last(event) {
event.preventDefault();
this.page = Math.floor(this.totalItems / this.pageSize) + 1;
this.pageChange.emit(this.page);
}
next(event) {
event.preventDefault();
this.page += 1;
this.pageChange.emit(this.page);
}
prev(event) {
event.preventDefault();
this.page -= 1;
this.pageChange.emit(this.page);
}
}
The only thing remaing now is to implement the callback function onPageChange to filter the data displayed, and to replace the hardcoded values for input parameters :-).
Be First to Comment