Add event to itemPerPage selection

[eedzjee]

[Add event to itemPerPage selection]: Make item per page selection available for dynamic page loading

Detailed description

Describe in detail the issue you're having.

When using the Pagination component with table data that is loaded per page from a back-end, I want to listen to the user-selected itemsPerPage and reload the current page with the new selected number of items.

At the moment there is only and event on the page-nr selection and not on the itemsPerPage.

Is this a feature request (new component, new icon), a bug, or a general issue?

bug/feature

Is this issue related to a specific component?

Pagination

What did you expect to happen? What happened instead? What would you like to see changed?

Emit an event when itemsPerPage changes, like with the page selection: https://github.com/IBM/carbon-components-angular/blob/master/src/pagination/pagination.component.ts#L166

What browser are you working in?

Not relevant

What version of the Carbon Design System are you using?

"carbon-components": "^10.26.0", "carbon-components-angular": "^4.38.1",

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Not relevant. As early as possible ;)

Additional information

• Screenshots or code Emit an event like with the page selection: https://github.com/IBM/carbon-components-angular/blob/master/src/pagination/pagination.component.ts#L166

[zvonimirfras]

Hi Albert, is this something you'd be interested in contributing? 🙂

[eedzjee]

Hi @zvonimirfras, I was looking into this further and found out there is already a way to deal with this, but I'm not sure if it was also meant to be used this way:

The set-method of itemsPerPage sets the pageLength value in the model and also resets the current page value: https://github.com/IBM/carbon-components-angular/blob/master/src/pagination/pagination.component.ts#L269, which in turn emits the selectPage() event.

So when handling the selectPage event, just checking or using the itemsPerPage value from the model can be done:

selectPage(page: number) {
   this.queryData(page, this.paginationModel.pageLength);
  }

However it would be nice to either get both the currentPage and pageLength in the selectPage method or use them from the paginationModel, but I'm not sure which one would be the way to go. Ideas?

[zvonimirfras]

That does sound like a good approach. When doing a query you'll probably always want to use the page length from the model, otherwise you need to store the length somewhere else and worry about syncing them.