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

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.

About this issue

  • Original URL
  • State: open
  • Created 7 years ago
  • Reactions: 24
  • Comments: 23 (1 by maintainers)

Most upvoted comments

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
      })

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 
})

will this ever be fixed? 😃

It says : “Property ‘_pageIndex’ is private and only accessible within class ‘MatPaginator’”

The original issue is about going directly to a page, not first/last or increment/decrement. Is there a method for jumping to a specific page?

Update 2022: Tried both @alexpearce92 and @AshotAleqs workaround, however only @alexpearce92 's worked for me.

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! 😁

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?

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.

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);
}

The original issue is about going directly to a page, not first/last or increment/decrement. Is there a method for jumping to a specific page?

@thw0rted Perhaps this link can help you: https://stackoverflow.com/a/51552039

@celalettin-turgut This behavior is seemingly intentional and a “fix” would break existing workflows. If you want to navigate programmatically, you should use the firstPage(), lastPage(), nextPage(), and previousPage() methods which all emit page event.

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)

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

Hi all any workaround on this ?

@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.

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

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