Paginator

Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.

Usage

API

DaffPaginatorModule

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

@NgModule()
class DaffPaginatorModule {}

DaffPaginatorComponent

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

@Component()
class DaffPaginatorComponent implements OnChanges {
  @Input() numberOfPages: number
  @Input() currentPage: number
  @Input() linkMode: false
  @Input() url: string
  @Input() queryParam: 'page'
  @Output() notifyPageChange: EventEmitter<any>
}

Selector: 'daff-paginator'

Properties

Name	Type	Description
@Input() numberOfPages	number	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.
@Input() currentPage	number	The currently selected page.
@Input() linkMode	false	Replace the paginator buttons with links. `url` is required if using this mode.
@Input() url	string	The url to which to navigate if the paginator is in link mode. This paginator component will set the page query param.
@Input() queryParam	'page'	The query param to which the paginator component will set the current page value in link mode.
@Output() notifyPageChange	EventEmitter<any>	Emits when the current page changes with the new current page.

DAFF_PAGINATOR_COMPONENTS

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

const DAFF_PAGINATOR_COMPONENTS: readonly [typeof DaffPaginatorComponent]