Welcome to the Alfresco Builder Network

Our technical resource site is still being improved. We'd love to hear your feedback. Tell us what you think

Adds pagination to the component it is used with.

basic

Contents

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>

Class members

Properties

NameTypeDefault valueDescription
paginationPaginationModelPagination object.
supportedPageSizesnumber[]An array of page sizes.
targetPaginatedComponentComponent that provides custom pagination support.

Events

NameTypeDescription
changeEventEmitter<PaginationModel>Emitted when pagination changes in any way.
changePageNumberEventEmitter<PaginationModel>Emitted when the page number changes.
changePageSizeEventEmitter<PaginationModel>Emitted when the page size changes.
nextPageEventEmitter<PaginationModel>Emitted when the next page is requested.
prevPageEventEmitter<PaginationModel>Emitted when the previous page is requested.

Details

You can use the Pagination component to add pagination features to other components. The Alfresco APIs make use of pagination to reduce the amount of data transferred in a single call. The start offset and number of items in the page are passed during the call. The items of interest will be returned along with a Pagination object. You can use this object to set up the pagination component and then subscribe to one of the page change events. This will return updated pagination data that you can pass to a subsequent API call.

Each event corresponds to a particular action from the user. For the change event, a PaginationQueryParams object is returned. This contains the query parameters supported by the REST API, skipCount and maxItems.

For all events other than change, a new Pagination object is returned as in the following example. The new object contains updated properties that you can use to fetch the next page of information.

Integrating with the Document List component

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

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

Custom pagination

The component also makes it easy to integrate your own implementation of pagination. You can supply any component that implements the PaginatedComponent interface as the value of the target property.

export interface PaginatedComponent {

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

}

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

See also

Interested in trying Alfresco?

Try Now