How to create Custom pagination in angular 2+?

Question

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

I am new in angular please help...

I want to use above bootstrap pagination code on my custom pagination component and also when I use pagination component in another component html as

(app-paginate [somedata]="somevalue" and event> _______ (/app-paginate>

It should work...

NOTE: I have already used ngx-bootstrap pagination so please don't provide that answer, I want to make my own pagination component.

sorry for my poor english ..

THANK YOU

Answer 1

If you know of ngx-bootstrap and like their component but want a different look, you can check their implementation of the pagination component on github, and then adapt to your case.

Here is an example of a custom version of the previous button, with roughly the same typescript code :

<li *ngIf="directionLinks" class="page-item" [class.disabled]="!hasPrevious() || disabled">
    <a aria-label="Previous" i18n-aria-label="@@pagination.previous-aria"class="page-link" href (click)="!!selectPage(page-1)"
      [attr.tabindex]="(hasPrevious() ? null : '-1')">
      <myCustomIcon aria-hidden="true"></myCustomIcon >
      <span class="sr-only" i18n="@@pagination.previous"></span>
    </a>
  </li>