- step1:
npm install ngx-pagination
- step2: Import the ngx-pagination in the
app.module.tsfile.
import { NgxPaginationModule} from 'ngx-pagination';
imports: [
...
NgxPaginationModule
],
- step3: In the component where you load your table, use the
ngx-paginationas a pipe.
<table>
...
<tbody>
<tr *ngFor="let person of message | paginate:{itemsPerPage:15, currentPage: p}; let i = index ">
<td scope="row">{{i}}</td>
<td>{{person.firstname}}</td>
<td>{{person.lastname}}</td>
<td>{{person.gender}}</td>
<td>{{person.phone}}</td>
<td>{{person.email}}</td>
<td><a style="color: #ff0000;" href="#">Delete</a>
<span> |</span>
<a style="color: #007bff;" href="#"> Edit</a></td>
</tr>
</tbody>
</table>
<pagination-controls (pageChange)="p = $event" style="float: right;"></pagination-controls>
And that's it!
