Pagination Component

Adds pagination to the component it is used with.

Basic Usage

<adf-pagination
    [pagination]="pagination"
    [supportedPageSizes]="sizes"
    (change)="onChange($event)"
    (nextPage)="onNextPage($event)"
    (prevPage)="onPreviousPage($event)"
    (changePageSize)="onChangePageSize($event)"
    (changePageNumber)="onChangePageNumber($event)">
</adf-pagination>

Integrating with Document List

<adf-document-list #documentList ...></adf-document-list>

<adf-pagination [target]="documentList" ...>
</adf-pagination>

Properties

Name	Type	Default	Description
pagination	Pagination		Pagination object
supportedPageSizes	Array<number>	[ 25, 50, 100 ]	An array of page sizes
target	PaginatedComponent		Component that provides custom pagination support

Events

Name	Type	Description
change	EventEmitter<PaginationQueryParams>	Triggered for any action in pagination
nextPage	EventEmitter<Pagination>	Triggered on next page action
prevPage	EventEmitter<Pagination>	Triggered on previous page action
changePageSize	EventEmitter<Pagination>	Triggered on page size change action
changePageNumber	EventEmitter<Pagination>	Triggered on page change action

Details

The pagination object is a generic component to paginate component. The Alfresco API are paginated and return a Pagination object. You can use the pagination object to feed the pagination component and then listen to the event which returns the current pagination and query again the API with the options chosen by the user.

Each event helps to detect the certain action that user have made using the component.

For change event, a PaginationQueryParams (including the query parameters supported by the REST API, skipCount and maxItems) is returned.

For all events other than change, a new Pagination object is returned as in the following example, with updated properties to be used to query further.

Custom pagination

The component also provides light integration with external implementations of the pagination. Any component can implement the PaginatedComponent and be used as a value for the target property.

export interface PaginatedComponent {

    pagination: Subject<Pagination>;
    updatePagination(params: PaginationQueryParams);

}

Your component needs to provide a pagination subject to allow Pagination component to reflect to changes. Every time user interacts with the Pagination, it will call the updatePagination method and pass the parameters.

2.8 KiB Raw Blame History