Pagination

Pagination show our users how many pages of content are available, and provides a way to step or navigate through them.

<tg-pagination
    currentPage="7"
    totalPages="20"
    itemsToShow="3">
    <a
        *tgPaginationItem="let page = page; let label = label; let kind = kind;"
        routerLink="."
        [queryParams]="{ page: page }"
        queryParamsHandling="merge">
        {{ label }}
    </a>
</tg-pagination>

Accessibility

• Pagination is wrapped in a nav element so assistive technologies are able to identify it as a navigation section.
• Pagination automatically provides ARIA labels for all page links rendered.

Behaviour

• Pagination does not wrap when the component exceeds the width of its container.
• The value of itemsToShow or compact can be set to change at different breakpoints to avoid pagination visually breaking.
• itemsToShow rounds the number up to the nearest odd number to account for the “current” link, which aims to render in the centre of the pagination control.
• The *tgPaginationItem template directive provides three variables:
  • Label: The visible label for a page item. For example “Next”, “1”, “2”, “3”.
  • Page: The page number used to bind a router link or href.
  • Kind: Available values are “first”, “last”, “prev”, “next”, “current” or “page”. Can be used to customise the links as they are rendered.
• The template provided in the code snippet is an a with a routerLink directive applied. Custom HTML can be generated where needed.
• To preserve layout, the “next” and “previous” controls have flex-basis set to 76px. If the controls are customised, the flex-basis value may need to be updated.
• Pagination will not show when totalPages is 0.