I am doing the pagination in UI side using angular14. But the issue I am facing is that if the items in a page is less than the "itemsPerPage" value then my pagination bar is moving its place. Can't I have the static pagination bar?
I am using NgxPaginationModule for the pagination.
component.html code
<div class="container mt-5">
<div *ngIf="successMsg" class="alert alert-success alert-dismissible fade show" role="alert">
<strong>{{successMsg}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Employee ID</th>
<th scope="col">Employee Name</th>
<th scope="col">Employee Designation</th>
<th scope="col">Employee Photo</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor= 'let i of readData | paginate: { itemsPerPage: 3, currentPage: p, totalItems: total}'>
<th scope="row">{{i.id}}</th>
<td>{{i.name}}</td>
<td>{{i.des}}</td>
<td><img class="smaller" [src]= "i.image" [alt]= "i.image"> </td>
<td>
<button class="btn btn-sm btn-danger" (click)="deleteID(i.id)">
Delete
</button>
<a [routerLink]="['/create',i.id]" class= "btn btn-sm btn-primary">Update</a>
</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="pageChangeEvent($event)"></pagination-controls>
</div>
</div>