• step1:

npm install ngx-pagination

• step2: Import the ngx-pagination in the app.module.ts file.

import { NgxPaginationModule} from 'ngx-pagination';
 imports: [
    ...
    NgxPaginationModule
  ],

• step3: In the component where you load your table, use the ngx-pagination as 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!