CODEWITHSUNDEEP
angularpaginationng-bootstrap
Sibiraj
Sibiraj

Reputation: 4756

How to implement ngb-pagination in angular4

I am trying to include ngb-pagination, how to make that work. this may be a duplicate but since that answer is not working I am posting it again.

I have no clue how to make it work

 <tr *ngFor="let data of reportsData;let i = index; trackBy: trackByFn">
        <td>{{data.time_stamp}}</td>
      </tr>
    </tbody>
    <ngb-pagination [collectionSize]="50" [page]="1" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"></ngb-pagination>

Upvotes: 1

Views: 26674

Answers (2)

b.zvyagintsev
b.zvyagintsev

Reputation: 43

I haven't do it yet but I think I found an answer for question every beginner ask (I am too): Why ngb-pagination doesn't work?

You should slice your JSON data by pages and in component HTML iterate through sliced data (NOTICE: this is only view code example!).

<div *ngFor="let item of pagedItems">{{item.name}}</div>

More info you can find on this article and in this question.

Upvotes: 2

Hamed Baatour
Hamed Baatour

Reputation: 6942

take a look at this working demo on plunker: Here

you can check the official docs over here: https://ng-bootstrap.github.io/#/components/pagination

<ngb-pagination [collectionSize]="70" [(page)]="page" [directionLinks]="false"></ngb-pagination>

in the component

import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-pagination-basic',
  templateUrl: 'src/pagination-basic.html'
})
export class NgbdPaginationBasic {
 //setting the default page
  page :number = 1;
}

another alternative is to use the ngx-pagination as a simpler soultion take a look at the github repo: Here

Upvotes: 4

Related Questions