Components: [Paginator] Does not emit event when changed programatically

[thw0rted]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Changing the page index programmatically should emit a page event.

What is the current behavior?

Assigning to .pageIndex does not emit a page event. There is no method to jump to a specified page and ensure that an event is emitted.

What are the steps to reproduce?

Open this plunker. Enter a (different) page number in the input at the top of the page and click "Go To". The displayed paginator offset ("11-20") changes but the table results do not.

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

The current behavior is wrong. The documentation for the page Output says "Event emitted when the paginator changes the page size or page index"; the page index has changed but the event was not emitted.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Still happening as of Beta 12, at least.

Is there anything else we should know?

I checked paginator.ts and the event is emitted in various methods that change the page index (next / previous) but not in the setting for pageIndex itself. I don't know why this design decision was made so I hesitate to suggest that it be changed, but we need some way to tell the paginator to go to a page as though the user had clicked to get to that page.

In the short term, I noticed that the private method _changePageSize is exposed in the typings for this component, and does not check if the size being set is the current size. So I can call

this.paginator._changePageSize(this.paginator.pageSize);

to force the paginator to emit a page event. Of course it's a pretty awful hack, but it gets the intended behavior. It'd be nice to avoid this in a future release.

[thw0rted]

I meant to leave a trackback to #6220 in the original issue -- not exactly the same thing, but related.

[alexpearce92]

Came here with the same problem. I needed a way to keep paginator on the same page after a data update for a mattable. The pageSize hack from @thw0rted is still the best option.

For others using paginator with mattable, I had to set the pageIndex inside a timeout in order for paginator to detect that the pageIndex was changed:

@ViewChild(MatPaginator) paginator: MatPaginator;
public dataSource: MatTableDataSource<{ [id: string]: any }>;
...
refreshPaginator() {
  if (!this.dataSource.paginator) {
    this.dataSource.paginator = this.paginator;
  }

  let pageIndex = 0;
  ... // some math

  setTimeout((idx) => {
    this.paginator._pageIndex = idx;
    this.paginator._changePageSize(this.paginator.pageSize);
  }, 0, pageIndex);
}

[CraigComeOnThisNameCantBeTaken]

I had to add this.paginator._changePageSize(this.paginator.pageSize); to get mine working also

[SurajSokasaneCB]

It says : "Property '_pageIndex' is private and only accessible within class 'MatPaginator'"

[thw0rted]

Quite some time ago, I believe they added a public accessor for pageIndex so you don't have to use the underscore-prefixed field anymore. You still have to use the prefix for _changePageSize though.

[thw0rted]

I haven't looked at this in ages. @andrewseguin is there any debate about this? I'm pretty sure it's unambiguously a bug, and can be fixed by inserting a call to _emitPageEvent in the setter for pageIndex. Do you know why this has sat open for a year and a half? Would you accept a PR?

ETA: while we're at it, can we talk about why there are two different ways to change the page size (pageSize and _changePageSize()), one of which emits a page event and one of which doesn't?

[thw0rted]

Hello again as we near the 2-year anniversary of this bug! #6220 just got auto-closed so I figured I should stop by here to provide some activity and avoid the same fate. Ping! 😁

[benelliott]

@thw0rted Just FYI - that bot only _locks_ already closed issues, it doesn't close them. So open issues like this should be OK without a bump.

[jimmykane]

Hi all any workaround on this ?

[AshotAleqs]

Hello Everyone. Here is My working example.
first you need to change paginator.pageIndex
and emit event .page for a change page

this.paginator.pageIndex = this.currentPage;
this.dataSource.paginator.page.emit({
  length: this.paginator.getNumberOfPages(),
pageIndex: this.currentPage,
pageSize: 10,
previousPageIndex: this.previousPage 
})

[b-mi]

AshotAleqs solution works very good - without flickering (as with setTimeout). Little improvement:

      this.paginator.pageIndex = pageIndex;
      this.dataSource.paginator.page.emit({
        length: this.paginator.getNumberOfPages(),
        pageIndex: pageIndex,
        pageSize: this.paginator.pageSize
      })

[AshotAleqs]

@b-mi ah I see, Thank you. I forgot to change my properties

[einarjohnson]

will this ever be fixed? :)

[alexpearce92]

What version is used where emitting the page event or using the public pageIndex works? In 7.2, the only working solution is still the one I posted above with _pageIndex and _changePageSize (use // @ts-ignore to ignore the private variable error)

[AshotAleqs]

Hello, @alexpearce92 I have used a 7.2 version of angular. And the solution works correctly. without any errors

[lorenzocovarrubiasjr]

What version is used where emitting the page event or using the public pageIndex works? In 7.2, the only working solution is still the one I posted above with _pageIndex and _changePageSize (use // @ts-ignore to ignore the private variable error)

Only works on my end with the setTimeout