CODEWITHSUNDEEP
angular
Ravi Teja
Ravi Teja

Reputation: 659

Can't bind to 'totalItems' since it isn't a known property of 'pagination'

this is my HTML pagination tag

<pagination class="pagination-sm" [(ngModel)]="page" [totalItems]="length" [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" (pageChanged)="changePage($event)" (numPages)="numPages = $event"></pagination>

and my model file

import { Injectable } from '@angular/core';
import { NgbPaginationConfig} from '@ng-bootstrap/ng-bootstrap';

@Injectable()
export class PaginationConfig {
    constructor(private config: NgbPaginationConfig) {
        config.boundaryLinks = true;
        config.maxSize = 5;
        config.pageSize = 20;
        config.size = 'sm';
    }
}

GitHub package I am using @ng-bootstrap/ng-bootstrap that time I got following error

Unhandled Promise rejection: Template parse errors:
Can't bind to 'itemsPerPage' since it isn't a known property of 'pagination'. ("
</tbody>
</table>
<pagination class="pagination-sm" [(ngModel)]="page"  [ERROR ->][itemsPerPage]="itemsPerPage" [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" (pageChange"): ng:///TeamModule/TeamComponent.html@83:54
Can't bind to 'maxSize' since it isn't a known property of 'pagination'. ("tbody>
</table>
<pagination class="pagination-sm" [(ngModel)]="page"  [itemsPerPage]="itemsPerPage" [ERROR ->][maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" (pageChanged)="changePage($event)" (numPa"): ng:///TeamModule/TeamComponent.html@83:84
Can't bind to 'boundaryLinks' since it isn't a known property of 'pagination'. ("ination class="pagination-sm" [(ngModel)]="page"  [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" [ERROR ->][boundaryLinks]="true" [rotate]="false" (pageChanged)="changePage($event)" (numPages)="numPages = $ev"): ng:///TeamModule/TeamComponent.html@83:104
Can't bind to 'rotate' since it isn't a known property of 'pagination'. ("on-sm" [(ngModel)]="page"  [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" [boundaryLinks]="true" [ERROR ->][rotate]="false" (pageChanged)="changePage($event)" (numPages)="numPages = $event"></pagination>
</di"): ng:///TeamModule/TeamComponent.html@83:127
'pagination' is not a known element:
1. If 'pagination' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</tbody>
</table>
[ERROR ->]<pagination class="pagination-sm" [(ngModel)]="page"  [itemsPerPage]="itemsPerPage" [maxSize]="maxSiz"): ng:///TeamModule/TeamComponent.html@83:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'itemsPerPage' since it isn't a known property of 'pagination'. ("
</tbody>
</table>

When loading time only i got that above error

Upvotes: 2

Views: 11255

Answers (1)

Ravi Teja
Ravi Teja

Reputation: 659

I miss that model file import ng-bootstrap

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

and inside @NgModel import for root

NgbModule.forRoot()

Edit: Please note that forRoot() of NgbModule is deprecated since 3.0.0 and will be removed from 4.0.0. Instead, it is suggested to just import

NgbModule

Upvotes: 7

Related Questions