Как использовать пейджинг с использованием angular и ngx-materialize

Question

Я пытаюсь реализовать нумерацию ngx-materialize, просматриваю список имен, но не могу получить ожидаемый результат, у кого-нибудь есть пример?

Lib: https://github.com/sherweb/ngx-materialize

Пример: https://sherweb.github.io/ngx-materialize/pagination

Мой код:

    <ul class="collection">
  <div class="col s12">
<li class="collection-item avatar" *ngFor="let item of listaCliente">
    <div *ngIf="item.statusCliente == 'ATIVO'; else inativo">
      <i class="material-icons circle green">perm_identity</i>
    </div>
    <span class="title">{{item.nome}}</span>
    <p>CPF: {{item.cpf}} <br>
      Status: {{item.statusCliente}}
    </p>
    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
    <a class="secondary-content waves-effect waves-light blue lighten-1 btn"><i class="material-icons right">person</i>Visualizar</a>
  </li>
    <mz-pagination [currentPage]="paginationCurrentPage" [enableFirstAndLastPageButtons]="paginationEnableFirstAndLastPageButtons"
      [itemsPerPage]="paginationItemPerPage" [maxPageButtons]="paginationMaxPageButtons" [totalItems]="paginationTotalItems"
      (pageChange)="playgroundPageChange($event)">
    </mz-pagination>
  </div>
</ul>

Component.ts

playgroundPageChange(currentPage: number) {
    this.paginationCurrentPage = currentPage;
  }