Angular material Paginator is not working

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

  1. If mat-paginator is an Angular component and it has length input, then verify that it is part of this module.
  2. 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",

Answers


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';

and

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

It's working for me. I am using the following versions:

"@angular/animations": "5.0.2",
"@angular/common": "^5.0.2",
"@angular/compiler": "^5.0.2",
"@angular/core": "^5.0.2",
"@angular/forms": "^5.0.2",
"@angular/http": "^5.0.2",
"@angular/material": "^5.0.0-rc0",
"@angular/cdk": "^5.0.0-rc0",
"@angular/platform-browser": "^5.0.2",
"@angular/platform-browser-dynamic": "^5.0.2",
"@angular/router": "^5.0.2",

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


Need Your Help

How to use TraceSource across classes

c# .net logging trace

I was recently studying documentation on TraceSource. Microsift says that TraceSource is a new way and should be used instead of old Trace class.