Angular material Paginator is not working

Question

I am trying to add Angular Material Paginator on my app.

MatPaginatorModule added in module.

<mat-paginator #paginator 
               [length]="100" 
               [pageSize]="10" 
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

But It gives a Error:

Uncaught Error: Template parse errors:

Can't bind to 'length' since it isn't a known property of 'mat-paginator'.

If mat-paginator is an Angular component and it has length input, then verify that it is part of this module.
If mat-paginator is a Web Component then add CUSTOM_ELEMENTS_SCHEMA to the @NgModule.schemas of this component to suppress this message.

Maybe i am missing something?

"@angular/animations": "^5.0.1",
"@angular/cdk": "^5.0.0-rc0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.0.0-rc0",

score 105 · Answer 1 · edited Feb 11 '23 at 23:12

105

Just in case someone else runs into this problem, all it takes is importing the module in app.module.ts

import { MatPaginatorModule } from '@angular/material/paginator';

and

@NgModule({
...
imports: [ 
....
MatPaginatorModule ]

edited Feb 11 '23 at 23:12

Community

1
1

answered Feb 01 '18 at 05:54

Daniel

1,176
1
6
8

10

PERFECT!!! Never realized this had to be done manually even after importing the MatTableModule! Thanks for your solution. BTW, this is the (updated?) syntax for importing the Paginator module: `import { MatPaginatorModule } from '@angular/material/paginator';` – Devner Jun 07 '18 at 09:00
3

thanks, urhg the documentation for angular material and bootstrap needs some serious polishing. – skydev Oct 17 '18 at 12:40

score 29 · Answer 2 · answered Sep 11 '19 at 09:43

I have noticed one thing which I think I should mention, It maybe useful or not. If you are using Angular Materials version 5 the paginator module is present in

import {MatPaginatorModule} from '@angular/material';

But from Angular 8 onwards its present in

import {MatPaginatorModule} from '@angular/material/paginator';

Be sure to add the module in app.module.ts too

score 4 · Answer 3 · edited Nov 30 '22 at 17:49

4

import {MatPaginatorModule} from '@angular/material/paginator';

edited Nov 30 '22 at 17:49

hestellezg

3,309
3
33
37

answered Apr 13 '22 at 08:16

Umer Baba

285
3
4

1

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Yunnosch Apr 13 '22 at 08:20

score 1 · Answer 4 · answered Sep 14 '20 at 14:58

1

For me, it also required MatChipsModule to compile.

import { MatChipsModule } from '@angular/material/chips';

answered Sep 14 '20 at 14:58

Denys P

36
1
4

score 1 · Answer 5 · answered Jun 01 '22 at 07:53

I was struggling with this issue last day and I found the solution as adding necessary records to the project.module.ts file. I think you should do something like this.

import { NameOfYourComponent } from './path_to_your_component/nameofyour.component';
...
@NgModule({
  declarations: [
    NameOfYourComponent ,
...

Angular material Paginator is not working

5 Answers5