Angular 使用角度创建分页器

如何为我的基本表格模型构建分页器？使用有角度的材料，引导或其他

目前im在modal中使用角度材质和引导

component.html

<section  style="margin-left: 2%" class="row mt-5">
  <table class="table table-hover">       
      <thead>
        <tr>
          <th scope="col">Data</th>
          <th scope="col">Data</th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of data">
         <td>{{Data.data}}</td> 
         <td>{{Data.data}}</td> 

        <td>
       <button class="btn btn-secondary" type="button" href="#updatedata" data-toggle="modal"  (click)="dataClicked(data)">Edit</button>
       <button class="btn btn-danger" mwlConfirmationPopover [popoverTitle]="popoverTitle"[popoverMessage]="popoverMessage"
        placement="left" (confirm)="delete(data)"(cancel)="cancelClicked = true" > Delete  </button>
        </td>    
        </tr>
            <div  *ngIf="data?.length === 0"  layout-align="center">
                <h3> No Data for Show </h3>
            </div>  
      </tbody>
    </table>
    </section>

资料
资料
{{Data.Data}
{{Data.Data}
编辑
删除
没有数据显示

这是一个我用angular构建的分页器：

如果你不懂什么，请随时提问