How to create and style a simple Pagination Component?

How to create and style a simple Pagination Component? #frontend #dev #UI #UX #angular

Abdallah Yashir
2 min readDec 20, 2022

Pagination remains one of the most common UI components for data-centric apps esp. in regard to tables.

Most modern Web frameworks such as ASP.NET, Ruby on Rails and Laravel come with a pagination feature by default requiring little configuration.

Here’s how I create a simple Pagination component in Angular using SCSS.

To begin with, here’s how you can place the buttons to get an idea.

<div class="pagination"> <div> <i class="icon icons8-chevron-left"></i> </div> <button class="button">1</button> <button class="button">2</button> <button class="button">2</button> <button class="button">..</button> <button class="button">12</button> <div> <i class="icon icons8-chevron-left"></i> </div> </div>



You can use display flex or grid for the layout.

If you know the number of buttons or controls beforehand, you can use grid.

However, if they are dynamic, a better approach is to use a flex layout.

Here’s an example using a list:

<div class="pages"> <div> <i class="icon chevron-left" (click)="previous()" [class.disabled]="currentPage === 1"></i> </div> <button *ngFor="let item of list" class="p-button" [class.selected]="item === currentPage" (click)="go(item)">{{ item }}</button> <button class="p-button">...</button> <button class="p-button" [class.selected]="maxNumber === currentPage" (click)="go(maxNumber)">{{ maxNumber }}</button> <div> <i class="icon chevron-right" (click)="next()" [class.disabled]="currentPage === maxNumber"></i> </div> </div>



Styling using flex and centering the component and its corresponding items.

.pages { padding: 1.5rem 25%; display: flex; justify-content: space-between; align-items: center; align-content: center; .p-button { width: 2rem; height: 2rem; border-radius: .25rem; user-select: none; } .selected { color: #fff; background-color: orange; } .icon { color: gray; cursor: pointer; } .disabled { color: lightgray; cursor: not-allowed; } }


Here’s the end result:




Abdallah Yashir

Senior Software Developer, Writer, Amateur Photographer, Reader