angular / angular/components

bug(MatPaginator): page observable parameter is not an instanceof PageEvent

Open
#26,546 1 comment 0 reactions 0 assignees View on GitHub
area: material/paginator P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

I had expected the emitted value in the `MatPaginator`'s `.page` `Observable` to be an `instanceof PageEvent`, but that doesn't seem to be the case. I was merging several observables together and making a query to my backend, and wanted to only reset the paginator's index to 0 only after my data had returned as long as the paginator did not trigger the query. I figured I could easily check if the emitted value was an `instanceof PageEvent` or not, but that doesn't seem to be the case.

Is there a reason why this behavior is occurring other than being a possible bug? `PageEvent` is a `class` type, so I would have expected it to have been instantiated as such.

I may also be fundamentally misunderstanding something, so please forgive me.

![image](https://user-images.githubusercontent.com/59396813/216065996-5841f94f-1592-4de5-a9ff-23628ebbe176.png)

### Reproduction

This is shown in this StackBlitz: https://stackblitz.com/edit/angular-9svfyb?file=src%2Fapp%2Fpaginator-overview-example.ts

```
@Component({
selector: 'paginator-overview-example',
templateUrl: 'paginator-overview-example.html',
})
export class PaginatorOverviewExample implements AfterViewInit {
@ViewChild(MatPaginator) paginator: MatPaginator;

ngAfterViewInit() {
this.paginator.page.subscribe((pageEvent: PageEvent) =>
console.log(
'pageEvent instanceof PageEvent',
pageEvent instanceof PageEvent // this returns false
)
);
}
}

### Expected Behavior

For the page event to be an `instanceof PageEvent`

### Actual Behavior

It is not an `instanceof PageEvent`.

### Environment

(from stackblitz)
{
"name": "example-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~15.0.0",
"@angular/cdk": "15.1.2",
"@angular/common": "~15.0.0",
"@angular/compiler": "~15.0.0",
"@angular/core": "~15.0.0",
"@angular/forms": "~15.0.0",
"@angular/material": "15.1.2",
"@angular/material-moment-adapter": "15.1.2",
"@angular/platform-browser": "~15.0.0",
"@angular/platform-browser-dynamic": "~15.0.0",
"@angular/router": "~15.0.0",
"moment": "^2.18.1",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.5"
},
"devDependencies": {
"@angular-devkit/build-angular": "~15.0.0",
"@angular/cli": "~15.0.0",
"@angular/compiler-cli": "~15.0.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.8.2"
}
}

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz reproduction in src/app/paginator-overview-example.ts and inspect the MatPaginator page output alongside the PageEvent type. Verify the reported instanceof result and compare it with the paginator's documented or tested behavior; done means the expected behavior is confirmed and fixed or clearly documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.