Pagination in Angular 5

Question

Following below code is data have to show in table and the data is very huge like 1,000 of rows and i want pagination for the table in angular 5, whats the best way to make pagination or is there any bulit in library is there for angular 5 pagination.

This is my code

<table class="table table-bordered" cellspacing="0" width="100%">
                            <thead class="sticky-header">
                                <tr>
                                    <th>Patient Name</th>
                                    <th>NRIC</th>
                                    <th>Gender / Age</th>
                                    <th>Reg.Date</th>
                                    <th>Recent HD</th>
                                    <th>Ref, Dr Name</th>
                                    <th>Hospital</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let patient of patientList; let i = index"  class="clickable-row" (click)="redirectToPatientDetail(patient.patientId, patient.patientName,patient.nric)">
                                    <td style="text-align: left" >{{patient.patientName}}</td>
                                    <td>{{patient.nric}}</td>
                                    <td><span><i ngClass="{{patient.sex === 'Male' ? 'fa fa-male': 'fa fa-female'}}"></i></span>  / {{patient.ageInYear}}</td>
                                    <td>{{patient.regDate}}</td>
                                    <td>{{patient.recentHDDate}}</td>
                                    <td style="text-align: left">{{patient.doctors}}</td>
                                    <td style="text-align: left">{{patient.hospitalName}}</td>
                                </tr>
                                <tr *ngIf="patientList.length === 0">
                                    <td colspan="7"><p>No Patient Found.</p></td>
                                </tr>
                            </tbody>
                        </table>

Answer 1

You can try UI libraries like angular material

It gives different look and feel than regular things.

Answer 2

So, here probably would be few solutions:

1. Bootstrap pagination with the custom implementation of pagination methods.
2. angular-ag-grid table (free one), that support's pagination as well
3. full custom pagination implementation with some implemented pagination panel and methods binding on it.

Good luck.

Link to angular-ag-grid: CLICK