Fixed pagination bar in angular 14

Viewed 18

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>
                &nbsp;
                <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>
0 Answers
Related