[Paginator] Add functionality to jump to first and last page

[Chris2011]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

There should be 2 buttons like << and >> to jump to the first and last page.

What is the current behavior?

There is no button for this. There is only a button for < and > prev and next.

Items per page: 10 - 1 - 10 of 100 < >

What is the use-case or motivation for changing an existing behavior?

If you have a long list, often it is needed to jump to the end and back to the first page/first items.

Items per page: 10 - 1 - 10 of 100 << < > >>

Is there anything else we should know?

#7615 - as a reference.

[lharries]

Hi @andrewseguin I'd be keen to give this one a go

[andrewseguin]

Sounds good to me, let's set the requirements and iterate from there:

• Needs to be optional (turned on through some Input())
• Should be able to draw up some icons that match the material icon (can't use the icons directly, should be done with divs): https://material.io/icons/#ic_first_page and https://material.io/icons/#ic_last_page
• Needs tests
• Needs to be added as an example in documentation

[lharries]

I agree with the above requirements.

For tests would it just be the spec tests? I don't see the paginator in the e2e tests.

[andrewseguin]

Yup just some spec unit tests would suffice, try to consider the main case and edge cases, e.g. the jump-to-first button should be disabled when on the first page

[lharries]

Whilst doing the above I found two bugs in the spec file. Would it be best to do them as separate PRs or in the same PR that I'm currently working on, when I have completed this feature?

1. A test was wrongly named. See fix here
2. There was an off-by-one error where the index of the last page was wrongly calculated.
   This happened in both the goToLastPage() method and in the following test 'should disable navigating to the next page if at last page'. See fix here
   In headless chrome, it was going to page index 10 to check that it could no longer navigate forward. Whilst there are 10 pages they are starting from index 0 and therefore the last page is in fact index 9.

The bug fix for 2 is required in order to write a valid test for the current feature.

[andrewseguin]

Good catch - if you submit the fixes via separate PRs, that'd be a lot easier for us.

[lharries]

Thanks! And will do

[lharries]

Do I need to create issues for them or straight to the PRs?

[andrewseguin]

No issue needed, just a PR will do

[lharries]

Will do.

On a side note: for the Component attribute of showing/hiding the first and last buttons would you have any recommendations on naming? I am thinking hideFirstLastButtons, which would be similar to the current hidePageSize?

e.g.

<mat-paginator [pageIndex]="pageIndex"
                   [pageSize]="pageSize"
                   [pageSizeOptions]="pageSizeOptions"
                   [hidePageSize]="hidePageSize"
                   [hideFirstLastButtons]="hideFirstLastButtons"
                   [length]="length"
                   (page)="latestPageEvent = $event">
</mat-paginator>

[andrewseguin]

Naming tends to be one of the harder parts of these sort of features.

By default, the paginator shouldn't show the first/last buttons anyways since the material spec doesn't include them. I imagine the flag would be more like showFirstAndLastButtons.

Curious how the interaction would look if you had a paginator for an "infinitely" long list. You'd want to make sure you can easily hide the Jump to Last button since it doesn't make sense.

[lharries]

Ok, I'll make the first/last buttons hidden by default and implement the showFirstAndLastButtons attribute.

Shall I add showFirstButton and showLastButton too to allow the control such as with the "infinitely" long list?

[andrewseguin]

Since its a pretty uncommon case and I'd lean more towards keeping a thinner API surface, let's leave those off. In that case it should be fairly trivial to just add a display: none to the last button.

If it comes up from users in the future, we can always add it in then

[lharries]

Great point

[lharries]

Is there a best practice for doing multiple PRs for the same file to avoid the conflicts on merge?

[lharries]

I have added the first and last buttons to the demo app, in a new table, and to the material-examples, to the existing table, is this correct or would there be a better way to do this.

Additionally, would we need to submit a PR to the material.angular.io docs?

Here's where I'm currently at:

• Needs to be optional (turned on through some Input())
• Needs tests
• Needs to be added as an example in documentation
• Should be able to draw up some icons that match the material icon (can't use the icons directly, should be done with divs): https://material.io/icons/#ic_first_page and https://material.io/icons/#ic_last_page

I'll have a look into the icons tomorrow but the functionality and all the tests are done 😄

[andrewseguin]

Ah right - go ahead and include the fixes in your PR and then write in the description that they include fixes from the other PRs and that the PR is blocked until the others are in. Since they are small I imagine they will be merged fairly quickly. Once they are in, you can rebase and remove the disclaimer on your final PR

[lharries]

Thanks Andrew, will do!

[willshowell]

This is awesome. Great work @lharries!

[btroncone]

@lharries I'm seeing this in Edge on first render:

Once you click on the button it corrects:

Any ideas?

[lharries]

@btroncone apologies for that. I'll set up an Edge development environment and get this fixed

[btroncone]

@lharries No worries! Had QA catch it in one of my projects and wanted to make you aware. I messed around with it briefly but didn't reach a solution I was happy with, hopefully you will have better luck!

[lharries]

@btroncone I'll create an issue and see if we can get it fixed

[lharries]

@btroncone there's a fix already submitted #9776

[btroncone]

@lharries Awesome, thanks for the update!

[tomliem]

Hi how to install this package @lharries ? is it by the default npm install --save @angular/material?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}