CODEWITHSUNDEEP
angulartypescript
Umaiz Khan
Umaiz Khan

Reputation: 1227

Angular how can I add paginaton in a custom table

I have a simple html table in which I am showing data by ngFor directive. What I am trying to look for is to add pagination but I am not sure how can I bind this pagination with a table.

My code

                <div class="table-responsive">
                    <table id="recent-orders" class="table table-hover table-xl mb-0">
                        <thead>
                            <tr>
                                <th class="border-top-0">Status</th>                                
                                <th class="border-top-0">Invoice#</th>
                                <th class="border-top-0">Customer Name</th>
                                <th class="border-top-0">Categories</th>
                                <th class="border-top-0">Shipping</th>
                                <th class="border-top-0">Amount</th>
                                <th class="border-top-0">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let x of data">
                                <td class="text-truncate"><i class="fa fa-dot-circle-o success font-medium-1 mr-1"></i> Paid</td>
                                <td class="text-truncate"><a href="#">{{ x.invoice }}</a></td>
                                <td class="text-truncate">

                                    <span>{{ x.name }}</span>
                                </td>

                                <td>
                                    <button type="button" class="btn btn-sm btn-outline-danger round">{{ x.Category }}</button>
                                </td>
                                <td>
                                    <ngb-progressbar type="danger" [value]="25" [striped]="true" class="progress-bar-md bg-gradient-x-danger"></ngb-progressbar>
                                </td>
                                <td class="text-truncate">$ {{ x.price }}</td>
                                <td>
                                    <a class="success p-0" data-original-title="" title="">
                                        <i class="fa fa-pencil font-medium-3 mr-2"></i>
                                    </a>
                                    <a class="info p-0" data-original-title="" title="">
                                        <i class="fa fa-check font-medium-3 mr-2"></i>
                                    </a>
                                    <a class="danger p-0" data-original-title="" title="">
                                        <i class="fa fa-trash-o font-medium-3 mr-2"></i>
                                    </a>
                                </td>
                            </tr>
                            
                        </tbody>
                    </table>
                    <ngb-pagination [collectionSize]="10" [pageSize]="2" [maxSize]="7" [rotate]="true" ></ngb-pagination>

You can see I have just added ngb-pagination add but is not functional I just added it for UI purpose so it can show now I need to know how can I make it functional

Upvotes: 1

Views: 159

Answers (1)

IAfanasov
IAfanasov

Reputation: 4993

subscribe to ngb-pagination's pageChange event and instead of looping through all the element of the data array loop only through selected page.

Example: https://www.codegrepper.com/code-examples/typescript/pagination+using+ngb-pagination+example

Upvotes: 1

Related Questions