Paginator

Pagination organizes and divides large amounts of content on separate pages and gives the user control over how much content they want to view on each page.

Usage

API

Components

DaffPaginatorComponent

import { DaffPaginatorComponent } from '@daffodil/design/paginator'

@Component()
class DaffPaginatorComponent {
  numberOfPages: InputSignal<number> = input.required<number>()
  currentPage: InputSignal<number> = input.required<number>()
  linkMode: InputSignal<boolean> = false
  url: InputSignal<string>
  queryParam: InputSignal<string> = 'page'

  notifyPageChange: OutputEmitterRef<any> = output<any>()
}

Inputs

numberOfPages

InputSignal<number>

Default input.required<number>()

Description

The total number of pages the paginator tracks. This number can change dynamically, but the end user is responsible for keeping numberOfPages and currentPage in sync.

For example, if the numberOfPages is dynamically changed to a value less than the currentPage, the paginator will break.

currentPage

InputSignal<number>

Default	`input.required<number>()`
Description	The currently selected page.

linkMode

InputSignal<boolean>

Default	`false`
Description	Replace the paginator buttons with links. `url` is required if using this mode.

url

InputSignal<string>

Default
Description	The url to which to navigate if the paginator is in link mode. This paginator component will set the page query param.

queryParam

InputSignal<string>

Default	`'page'`
Description	The query param to which the paginator component will set the current page value in link mode.

Outputs

notifyPageChange

OutputEmitterRef<any>

Default	–
Description	Emits when the current page changes with the new current page.

Modules

DaffPaginatorModule

Deprecated

import { DaffPaginatorModule } from '@daffodil/design/paginator'

@NgModule()
class DaffPaginatorModule {}