How to create and style a simple Pagination Component?
How to create and style a simple Pagination Component? #frontend #dev #UI #UX #angular
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>

Layout
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
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:
