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'.
mat-paginator
is an Angular component and it has length
input, then verify that it is part of this module.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",
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 ]
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
对我来说,它还需要MatChipsModule
进行编译。
import { MatChipsModule } from '@angular/material/chips';
从“@angular/material/paginator”导入 {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 use paginator too. I import :
import {MatPaginatorModule} from '@angular/material/paginator';
it in my app.module
, @NgModule
-> imports too, but I get the same error :
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.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
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 ,
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.