Как создать Custom pagination в угловых 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>

Я новичок в угловой, пожалуйста, помогите...

Я хочу использовать приведенный выше код разбиения на страницы при загрузке в моем пользовательском компоненте разбиения на страницы, а также когда я использую компонент разбиения на страницы в другом компоненте html как

(app-paginate [somedata]="somevalue" и событие> _______ (/app-paginate>

Он должен работать...

ПРИМЕЧАНИЕ: я уже использовал нумерацию страниц ngx-bootstrap, поэтому, пожалуйста, не предоставляйте такой ответ, я хочу создать свой собственный компонент нумерации страниц.

извините за мой плохой английский..

БЛАГОДАРЮ ВАС

Answer 1

Если вы знаете ngx-bootstrap и вам нравится их компонент, но вы хотите по-другому взглянуть на него, вы можете проверить их реализацию компонента нумерации страниц на github, а затем адаптироваться к вашему случаю.

Вот пример пользовательской версии предыдущей кнопки, с примерно таким же машинописным кодом:

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