I am trying to add Angular Material Paginator in my application
I've added MatPaginatorModule from '@angular/material/paginator' in module.
Simple usage in template:
<mat-paginator [length]="100"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]"
aria-label="Select page">
</mat-paginator>
But It gives an Error:
ERROR TypeError: Cannot read properties of undefined (reading 'changes')
at new MatPaginator (paginator.js:108:1)
at createClass (core.js:23689:1)
at createDirectiveInstance (core.js:23564:1)
at createViewNodes (core.js:30653:1)
at callViewAction (core.js:30969:1)
at execComponentViewsAction (core.js:30888:1)
at createViewNodes (core.js:30681:1)
at createEmbeddedView (core.js:30556:1)
at callWithDebugContext (core.js:31536:1)
at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.js:31100:1)
package.json:
"dependencies": {
"@angular/animations": "^10.2.2",
"@angular/cdk": "^10.2.7",
"@angular/common": "^10.2.2",
"@angular/compiler": "^10.2.2",
"@angular/core": "^10.2.2",
"@angular/forms": "^10.2.2",
"@angular/material": "^10.2.7",
"@angular/platform-browser": "^10.2.2",
"@angular/platform-browser-dynamic": "^10.2.2",
"@angular/router": "^10.2.2",
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1002.0",
"@angular/cli": "^10.2.0",
"@angular/compiler-cli": "^10.2.2",
}
What am I doing wrong ? Any help will be appreciated.
EDIT: I've found a solution. In my case, the problem was caused by Ivy that was set to false in tsconfig.ts file, I've changed it to true and now it works fine.
"angularCompilerOptions": {
"enableIvy": true,
}