Ngx-bootstrap: Cannot get the pagination working

[grzegorzgolec]

Did you installed ng2-bootstrap via npm ?

[oers]

did you declare
directives = [PAGINATION_DIRECTIVES ],
?

[veaceslavz]

Yes, I did.
Angular version can be the cause of this issue? I am using angular rc4

[grzegorzgolec]

I had similar problem, try to look at #667 maybe this will help you.

[hoangnguyenba]

Same problem here:
I am trying to use ng2-table. In the demo, It uses pagination

<pagination [totalItems]="totalItems"
            [(ngModel)]="page"
            (pageChanged)="onChangeTable(config, $event)">
</pagination>

I get this error:

Error: No value accessor for ''

[hoangnguyenba]

Sorry, it was fixed. I think you need to update demo on :
http://valor-software.com/ng2-table/

[amnporter]

@hoangnguyenba, @veaceslavz , how were u able to fix this?

I've added an issue 815 as well. Is this something you were facing?

[dicbrus]

Pagination not working. Anybody knows workaround?

[mmaryo]

not working with rc-6

[Martin-Wegner]

ng2-bootstrap 1.1.1 is for Angular RC6
ng2-bootstrap 1.1.0 is for Angular RC5
ng2-bootstrap 1.0.24 is for Angular RC4

Don't mix the versions because it will not work. The reason is, that the Angular 2 team made breaking changes between RC4 and RC5 and between RC5 and RC6.

[gimmeshelter]

I have [email protected] and @angular RC6 and still have this problem. I have imported the PaginationModule in my app's @NgModule and still get several errors: "Can't bind to 'insert property name' since it isn't a known property of 'pagination'." I should note that I am using angular-cli@webpack.

[Martin-Wegner]

@gimmeshelter can you show us your ngmodule annotation code which imports the pagination and the template which causes the error?

[gimmeshelter]

@Martin-Wegner ,

Sorry, I should know better than to not include the evidence. Here are the details:

app.module.ts

// Angular Imports
import { NgModule } from '@angular/core';
import { Router } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { HttpModule } from '@angular/http';

// 3rd Party Imports
import { PaginationModule } from 'ng2-bootstrap/components/pagination';

// Project App Imports
import { AppComponent } from './app.component';
import { router, appRoutingProviders } from './app.routing';
import { ApiHttpModule } from './core/http/api_http.module';

// Project Component/Module Imports
import { HomeModule } from './components/home/home.module';
import { ReviewsModule } from './components/reviews/reviews.module';
import { NavComponent } from './components/nav/nav.component';

// Project Service Imports
import { ReviewsService } from './services/reviews/reviews.service';

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        router,
        ApiHttpModule,
        PaginationModule,
        HomeModule,
        ReviewsModule,
    ],
    declarations: [AppComponent, NavComponent],
    providers: [
        {
            provide: APP_BASE_HREF,
            useValue: '/',
        },
        appRoutingProviders,
        ReviewsService
    ],
    bootstrap: [AppComponent],
})

export class AppModule { }

Usage from the template:

<pagination class="pagination-sm" [totalItems]="reviewsResp.totalItems" [(ngModel)]="currentPage" [maxSize]="7" 
                [itemsPerPage]="reviewsResp.itemsPerPage" [boundaryLinks]="true" [rotate]="true" (numPages)="numPages = $event"></pagination>

The error I see:

zone.js:461Unhandled Promise rejection: Template parse errors:
Can't bind to 'totalItems' since it isn't a known property of 'pagination'. ("
            </div>
        </div>
        <pagination class="pagination-sm" [ERROR ->][totalItems]="reviewsResp.totalItems" [(ngModel)]="currentPage" [maxSize]="7" 
                [items"): ReviewsComponent@39:42
Can't bind to 'ngModel' since it isn't a known property of 'pagination'. ("div>
        </div>
        <pagination class="pagination-sm" [totalItems]="reviewsResp.totalItems" [ERROR ->][(ngModel)]="currentPage" [maxSize]="7" 
                [itemsPerPage]="reviewsResp.itemsPerPage" [b"): ReviewsComponent@39:80
Can't bind to 'maxSize' since it isn't a known property of 'pagination'. ("  <pagination class="pagination-sm" [totalItems]="reviewsResp.totalItems" [(ngModel)]="currentPage" [ERROR ->][maxSize]="7" 
                [itemsPerPage]="reviewsResp.itemsPerPage" [boundaryLinks]="true" [rota"): ReviewsComponent@39:106
Can't bind to 'itemsPerPage' since it isn't a known property of 'pagination'. ("-sm" [totalItems]="reviewsResp.totalItems" [(ngModel)]="currentPage" [maxSize]="7" 
                [ERROR ->][itemsPerPage]="reviewsResp.itemsPerPage" [boundaryLinks]="true" [rotate]="true" (numPages)="numPages"): ReviewsComponent@40:16
Can't bind to 'boundaryLinks' since it isn't a known property of 'pagination'. (" [(ngModel)]="currentPage" [maxSize]="7" 
                [itemsPerPage]="reviewsResp.itemsPerPage" [ERROR ->][boundaryLinks]="true" [rotate]="true" (numPages)="numPages = $event"></pagination>
    </div>
    <d"): ReviewsComponent@40:58
Can't bind to 'rotate' since it isn't a known property of 'pagination'. ("ge" [maxSize]="7" 
                [itemsPerPage]="reviewsResp.itemsPerPage" [boundaryLinks]="true" [ERROR ->][rotate]="true" (numPages)="numPages = $event"></pagination>
    </div>
    <div *ngIf="!!reviewsResp"): ReviewsComponent@40:81 ; Zone: <root> ; Task: Promise.then ; Value: 

[Martin-Wegner]

The template error comes from the ReviewsComponent, right? Why is this component not included in the declarations?

Offtopic: What is appRoutingProviders? Routing configuration must be imported!?

[gimmeshelter]

I see my mistake. I did not import the PaginationModule in the ReviewsModule where the ReviewsComponent is declared, but rather thought it would flow down from the app module. I apologize as I'm still getting used to the NgModule concept.

Offtopic: That was a vestige of a routing example from some previous RC. It is not necessary now.

Thank you for your help, @Martin-Wegner

[winnemucca]

@Martin-Wegner I do not want to open a new issue but I have to ask if there is an additional step with the pagination component that I am missing. I am using angular-ci release candidate 1. I have a clickable pagination field, but I am getting all of the items on one page. Shouldn't max-size or itemsPerPage limit the list?

Here are the steps that I took

Inside of my app.module

imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
PaginationModule.forRoot(),
RouterModule.forRoot(appRoutes)

],

Inside of my class I defined the values as

  maxSize:number = 15;
 bigTotalItems:number = 726; //hard coded for now
 bigCurrentPage:number = 1;
 numPages:number = 0;

Inside of my template I have took the example off the examples provided

 <div class="col-md-6">
        <pagination 
            class="pagination-sm"
            [itemsPerPage]="15"
            [totalItems]="bigTotalItems" 
            [(ngModel)]="bigCurrentPage" 
            [maxSize]="maxSize" 
            [boundaryLinks]="true" 
            [rotate]="false" 
            (numPages)="numPages = $event">
        </pagination>
    </div>