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 implements OnChanges {
  @Input() numberOfPages: number
  @Input() currentPage: number
  @Input() linkMode: boolean = false
  @Input() url: string
  @Input() queryParam: string = 'page'

  @Output() notifyPageChange: EventEmitter<any> = new EventEmitter()
}

Inputs

numberOfPages

number

Default –

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

number

Default	–
Description	The currently selected page.

linkMode

boolean

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

url

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

string

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

Outputs

notifyPageChange

EventEmitter

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