Pagination

Usage samples

    
  const paginationInfo = {
    pageSize: 2,
    page: 1,
    pagesToShow: 3,
    total: 15
  };

      
  <lux-pagination *ngIf="users$ | async"
                  (goToPage)="goToPage($event)"
                  (pageSizeChange)="reloadPage($event)"
                  [paginationInfo]="paginationInfo">
  </lux-pagination>

Username	First Name	Last Name
{{ user.userName }}	{{ user.firstName }}	{{ user.lastName }}

Documentation

Properties

PaginationInfo Data structure providing the pagination details.
- total Total of items.
- pageSize Number of items that it is show.
- page Current page.
- pagesToShow Pages to show in the toolbar.

Events

goToPage(n: number) Event triggered when click in one of pagination buttons. 'n' is the number of the page
reloadPage(n: number) Event triggered when changes the number of items to show. 'n' is the number of items to show